淺析javascript中的Event事件

更新時(shí)間：2016年12月09日 09:43:38 作者：老板丶魚丸粗面

本文主要對(duì)javascript中的（Event）事件進(jìn)行介紹，文章篇尾舉了幾個(gè)案例：方塊隨著鼠標(biāo)移動(dòng)；輸入框文字提示；仿select控件；留言本；自定義右鍵菜單；鍵盤控制div運(yùn)動(dòng)。需要的朋友可以看下

1、焦點(diǎn)：當(dāng)一個(gè)元素有焦點(diǎn)的時(shí)候，那么他就可以接受用戶的輸入(不是所有元素都能接受焦點(diǎn))

給元素設(shè)置焦點(diǎn)的方式：

　 1、點(diǎn)擊

　　2、tab

　　3、js

2、（例子：輸入框提示文字）

　　onfocus:當(dāng)元素獲取焦點(diǎn)時(shí)觸發(fā)：

element.onfocus = function(){};

　 onblur:當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā)：

element.onblur = function(){};

　 obj.focus() 給指定的元素設(shè)置焦點(diǎn)

　　obj.blur() 取消指定元素的焦點(diǎn)

　　obj.select()選擇指定元素里面的文本內(nèi)容

3、（例子：方塊隨著鼠標(biāo)移動(dòng)）

event: 事件對(duì)象。

　　當(dāng)一個(gè)事件發(fā)生時(shí)，和當(dāng)前這個(gè)對(duì)象發(fā)生的事件所有有關(guān)的信息都會(huì)臨時(shí)保存在一個(gè)指定的地方-event對(duì)象，供我們需要時(shí)調(diào)用。就像是飛機(jī)的黑匣子。

　　事件對(duì)象必須在一個(gè)對(duì)象的事件調(diào)用函數(shù)中使用才有內(nèi)容。

　　事件函數(shù)：事件調(diào)用的函數(shù)，一個(gè)函數(shù)是不是事件函數(shù)，不在定義時(shí)決定而是在調(diào)用的時(shí)候決定

4、兼容

element.onclick = fn1;

　　IE/Chrome瀏覽器:event是一個(gè)內(nèi)置的全局對(duì)象（可以直接使用）

 function fn1(){
 　　alert(event);
  }

　　標(biāo)準(zhǔn)下：事件對(duì)象是通過事件函數(shù)的第一個(gè)參數(shù)傳入

 function fn1(ev){
　　　　alert(ev);
 }

　　兼容寫法：

  function fn1(ev){
 　　　　var ev = ev || event;
  }

　　clientX[Y]:當(dāng)一個(gè)事件發(fā)生的時(shí)候，鼠標(biāo)到頁(yè)面可視區(qū)的距離

5、事件流（例子：仿select控件）

　　● 事件冒泡：當(dāng)一個(gè)元素接受到事件的時(shí)候，會(huì)把他接受到的事件傳播給他的父級(jí)，一直到頂層window。

　　● 事件捕獲:一個(gè)元素要想接受到事件，它的父元素會(huì)首先接受到該事件，然后再傳給它。

　　注意：在ie下是沒有的事件捕獲的。在事件綁定中，標(biāo)準(zhǔn)下有

6、事件綁定

　　● 第一種：

element.onclick = fn1;

　　注意：oDiv.onclick = fn1;

　　　　　oDiv.onclick = fn2;

　　　　　這樣fn2會(huì)覆蓋fn1;

　　● 第二種：

　　IE:obj.attachEvent(事件名稱，事件函數(shù))

　　　 1、沒有捕獲

　　　　2、事件名稱有on

　　　　3、事件函數(shù)的執(zhí)行順序：標(biāo)準(zhǔn)》正序非標(biāo)準(zhǔn)》倒序

　　　　4、this指向window

element.attachEvent(onclick,fn1);

　　標(biāo)準(zhǔn)：obj.addEventListener(事件名稱，事件函數(shù)，是否捕獲)

　　　　1、有捕獲

　　　　2、事件名稱沒有on

　　　　3、事件的執(zhí)行順序是正序

　　　　4、this指向觸發(fā)該事件的對(duì)象

element.addEventListener(click,fn1,false);

　bind函數(shù)

   function bind(obj,evname,fn){
    if(obj.addEventListener){
    obj.addEventListener(evname,fn,false);
    }else{
     obj.attachEvent('on' + evname,function(){
      fn.call(obj);
     });
    }
   }

事件取消綁定

　● 第一種

element.onclick = null;

　● 第二種

IE:obj.detachEvent(事件名稱，事件函數(shù));

document.detachEvent('onclick',fn1);

　　標(biāo)準(zhǔn)：obj.removeEventListener(事件名稱，事件函數(shù)，是否捕獲)；

document.removeEventListener('click',fn1,false);

8、鍵盤事件(例子：留言本)

　● onkeydown : 當(dāng)鍵盤按鍵按下的時(shí)候觸發(fā)

　● onkeyup : 當(dāng)鍵盤按鍵抬起的時(shí)候觸發(fā)

　● event.keyCode : 數(shù)字類型鍵盤按鍵的值鍵值

ctrlKey，shiftKey，altKey布爾值

　當(dāng)一個(gè)事件觸發(fā)的時(shí)候，如果shift || ctrl || alt鍵沒有按下，則返回false，否則返回true;

9、默認(rèn)事件(例子：自定義右鍵菜單、鍵盤控制div運(yùn)動(dòng))

　● 事件默認(rèn)行為 : 當(dāng)一個(gè)事件發(fā)生的時(shí)候?yàn)g覽器默認(rèn)會(huì)做的事。

　● 阻止默認(rèn)事件：return false;

　oncontextmenu : 右鍵菜單事件，當(dāng)右鍵菜單（環(huán)境菜單）顯示出來(lái)的時(shí)候觸發(fā)。

案例：

方塊隨著鼠標(biāo)移動(dòng)：

onmouseover:當(dāng)鼠標(biāo)在一個(gè)元素上移動(dòng)時(shí)觸發(fā)

注意：觸發(fā)的頻率不是像素，而是間隔時(shí)間。在一個(gè)間隔時(shí)間內(nèi)不論鼠標(biāo)移動(dòng)了多遠(yuǎn)只觸發(fā)一次

<style>
   body{
     height: 2000px;
    }
    #div{
     width:100px;
     height: 100px;
     background:red;
     position: absolute;
    }
   </style>
   <body>
    <div id="div1"></div>
   </body>
   <script>
    var oDiv = document.getElementById('div1');
    document.onmouseover = function(ev){
     var ev = ev || event;
     // 如果當(dāng)滾動(dòng)條滾動(dòng)了（頁(yè)面的頭部部分隱藏了），方塊是以頁(yè)面定位的，而鼠標(biāo)是以可視區(qū)定位的，這樣就會(huì)產(chǎn)生bug。所以我們要加上滾動(dòng)條滾動(dòng)的距離
     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
     oDIv.style.top = ev.clientX + scrollTop + 'px';
     oDIv.style.left = ev.clientY + 'px';
    }
   </script>

輸入框文字提示:

  <style></style>
   <body>
    <input type="text" id="text1" value="請(qǐng)輸入內(nèi)容"/>
    <input type="button" id="btn" value="全選" />
   </body>
   <script>
    var oText = document.getElementById('text1');
    var oBtn = document.getElementById('btn');
    oText.onfocus = function(){
     if(this.value == '請(qǐng)輸入內(nèi)容'){
      this.value = '';
     }
    }
    oText.onblur = function(){
     if(this.value == ''){
      this.value = '請(qǐng)輸入內(nèi)容';
     }
    }
    oBtn.onclick = function(){
     oText.select();
    }
   </script>

仿select控件：

 <style>
    #div1{
     width: 100px;
     height: 200px;
     border: 1px solid red;
     display: none;
    }
   </style>
   <body>
    <input type="button" value="按鈕" id="btn" />
    <div id="div1"></div>
    <p>ppppppppp</p>
    <p>ppppppppp</p>
    <p>ppppppppp</p>
    <p>ppppppppp</p>
    <p>ppppppppp</p>
   </body>
   <script>
   window.onload = function(){
    var oBtn = document.getElementById('btn');
     var oDiv = document.getElementById('div1');
     oBtn.onclick = function(ev){
      var ev = ev || event;
      ev.cancelBubble = true;
      oDiv.style.display = 'block';
     }
     document.onclick = function(){
      oDiv.style.display = 'none';
     }
    }
   </script>

留言本:

   <style></style>
   <body>
    <input type="text" id="con"/>
    <ul id="box"></ul>
   </body>
   <script>
    var oUl = document.getElementById('box');
    var oText = document.getElementById('con');
    
    document.onkeyup = function(ev){
     var ev = ev || even; 
     if(ev.keyCode != ''){
      if(ev.keyCode == 13){
       var oLi = document.createElement('li'); 
       oLi.innerHTML = oText.value;
       if(oUl.children[0]){
        oUl.insertBefore(oLi,oUl.children[0]);
       }else{
        oUl.appendChild(oLi);
       }
      } 
     }
    }
  </script>

自定義右鍵菜單:

  <style>
    body{
    height: 2000px;
    }
    #box{
     width: 100px;
     height: 200px;
     background: red;
     display: none;
     position: absolute;;
    }
   </style>
   <body>
    <div id="box"></div>
   </body>
   <script>
    var oBox = document.getElementById('box');
    document.oncontextmenu = function(ev){
     var ev = ev || event;
     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
     var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
     oBox.style.display = 'block';
     oBox.style.top = scrollTop + ev.clientY + 'px';
     oBox.style.left = scrollLeft + ev.clientX + 'px';
 
     return false;
    }
    document.onclick = function(){
     oBox.style.display = 'none';
    }
   </script>

鍵盤控制div運(yùn)動(dòng):

   <style>
    #box{
     width: 100px;
     height: 100px;
     background: red;
     position: absolute;
    }
   </style>
   <body>
    <div id="box"></div>
   </body>
   <script>
    var oBox = document.getElementById('box');
    var timer = null;
    var oLeft = false;
    var oTop = false;
    var oRight = false;
    var oBottom = false;
    // 運(yùn)動(dòng)一直就緒，等待按鍵操作
    timer = setInterval(function(){
     if(oLeft){
     oBox.style.left = oBox.offsetLeft - 10 + 'px';
     }else if(oTop){
      oBox.style.top = oBox.offsetTop - 10 + 'px';
     }else if(oRight){
      oBox.style.left = oBox.offsetLeft + 10 + 'px';
     }else if(oBottom){
      oBox.style.top = oBox.offsetTop + 10 + 'px';
     }
     // 防止溢出
     limit();
    },10); 
    // 按鍵按下，開始運(yùn)動(dòng)
    document.onkeydown = function(ev){
     var ev = ev || even;
     switch (ev.keyCode){
      case 37:
       oLeft = true;
       break;
      case 38:
       oTop = true;
       break;
      case 39:
       oRight = true;
       break;
      case 40:
       oBottom = true;
       break;
     }
    }
    // 按鍵抬起，停止運(yùn)動(dòng)
    document.onkeyup = function(ev){
     var ev = ev || even;
     switch (ev.keyCode){
      case 37:
       oLeft = false;
       break;
      case 38:
       oTop = false;
       break;
      case 39:
       oRight = false;
       break;
      case 40:
       oBottom = false;
       break;
     }
    }
    function limit(){
     // 控制左邊
     if(oBox.offsetLeft <= 0){
      oBox.style.left = 0;
     }
     // 控制上邊
     if(oBox.offsetTop <= 0){
      oBox.style.top = 0;
     }
     // 控制右邊
     if(document.documentElement.clientWidth - oBox.offsetLeft - oBox.offsetWidth < 0){
      oBox.style.left = document.documentElement.clientWidth - oBox.offsetWidth + 'px';
     }
     // 控制下邊
     if(document.documentElement.clientHeight - oBox.offsetTop - oBox.offsetHeight < 0){
      oBox.style.top = document.documentElement.clientHeight - oBox.offsetHeight + 'px';
     }
    }
   </script>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: