JS事件

JS事件包括如下：

1. 鼠標(biāo)事件

onclick 點(diǎn)擊
onmouseup 鼠標(biāo)彈起
onmousedown 鼠標(biāo)按下
onmouseover 鼠標(biāo)移動到元素上
onmouseout 鼠標(biāo)離開元素
onmousemove 鼠標(biāo)在元素上移動

拖拽事件

obj.onmousedown=function(){
      ……
      document.onmousemove=function(){
            ……
            return false;//清除默認(rèn)事件（移動文字或圖片加載事件）
      }
   }
    document.onmouseup=function(){
        document.onmousemove=null;//清除自定義的鼠標(biāo)移動事件，避免obj甩不掉。
    }

滾輪事件

1.onmousewheel （Chrome與IE）
DOMMouseScroll （火狐） 只能用事件綁定方式添加
2.wheelDelta 用來判斷滾輪滾動的方向

2.鍵盤事件

onkeydown 鍵盤按下
onkeyup 鍵盤彈起
onkeypress 鍵盤按下并放開

onkeydown與onkeypress的區(qū)別：

(1)onkeydowm 指用戶按下任何鍵盤時發(fā)生；onkeyup指按下并放開任何字母數(shù)字鍵時發(fā)生。onkeydown先于onkeypress發(fā)生。
(2)onkeydowm捕獲的keyCode不區(qū)分大小寫，而onkeypress區(qū)分。
(3)onkeypress不能識別系統(tǒng)按鈕（如箭頭鍵和功能鍵等）

一些屬性：

(1)ev.keyCode;//返回鍵盤對應(yīng)字符的ASCII碼，但不完全等同。
(2)ev.charCode;
(3)ev.ctrlKey;/ev.shiftKey;/ev.altKey;

3.焦點(diǎn)事件

• 焦點(diǎn)定義：光標(biāo)停留的位置，且可以接收用戶的輸入。
• 獲取焦點(diǎn)方式：(1)點(diǎn)擊；(2)tab鍵；(3)js設(shè)置。
• 事件：
  onfocus 獲得焦點(diǎn)；
  onblur 失去焦點(diǎn)；
• 方法：
  obj.focus();//自動獲取焦點(diǎn)。
  obj.blur();//失去焦點(diǎn)。
  obj.select();//選擇指定元素obj的內(nèi)容。

4.event對象

當(dāng)事件發(fā)生時，跟觸發(fā)的事件對象的所有信息都保存在event對象里面，包括事件類型，鼠標(biāo)位置，事件函數(shù)等。

• event對象是內(nèi)置的全局對象，可以直接調(diào)用。其是在事件處理函數(shù)觸發(fā)時通過第一個參數(shù)傳入。如：

  btn.onclick=function(ev){
     console.log(ev);
  }//IE8及以下不兼容。（event對象火狐不兼容?。?
  //兼容處理：
  btn.onclick=function(ev){
     var ev = ev || event;
     console.log(ev);
  }//當(dāng)?shù)谝粋€為真時，返回第一個值；如果第一個為假，則判斷第二個，若為真，返回第二個值；若兩個都為假，則返回undefined。

• 獲取鼠標(biāo)點(diǎn)擊時的位置：

  ev.clientX-------ev.clientY;

5.事件捕獲

• 查看鏈接

• 全局捕獲（只有IE能使用）

  btn.setCapture();//當(dāng)一個元素設(shè)置了全局捕獲以后，這個元素監(jiān)聽所有事件，當(dāng)有事件發(fā)生時就會觸發(fā)這個元素的處理函數(shù)。（只捕獲一次）

• 釋放全局捕獲

  btn.releaseCapture();

6.事件冒泡

當(dāng)一個元素接收到事件的時候，會把它接收到的事件依次傳播給它的父級，直到頂層window。
………… ---> body ---> document ---> window。
（IE8及以下沒有冒泡至window。）

• 取消事件冒泡：

  ev.cancelBubble=true;//所有瀏覽器都支持！
  ev.stopPropagation();//IE8及以下不兼容！
  //兼容處理：
  ev.stopPropagation() ? ev.stopPropagation() : ev.cancelBubble=true;

• 例子：

    window.onload=function(){
            var btn=document.getElementsByTagName("button")[0];
            var oDiv=document.getElementsByTagName("div")[0];
            btn.onclick=function(ev){
                    console.log("按鈕點(diǎn)擊了");
                    var ev=ev||event;
                    ev.cancelBubble=true;
                    //ev.stopPropagation();
            }
            oDiv.onclick=function(){
                    console.log("div點(diǎn)擊了");
                    console.log(event);
            }
            document.body.onclick=function(){
                    console.log("body點(diǎn)擊了");
            }
            document.onclick=function(){
                    console.log("document點(diǎn)擊了");
            }
            window.onclick=function(){
                    console.log("window點(diǎn)擊了");
            }
    }

7.事件綁定

傳統(tǒng)的添加事件的方法，如果同時添加兩個事件，前面的會被后面的覆蓋掉。

事件綁定：可以給同一對象的同一事件添加不同的事件處理函數(shù)。

• IE（除IE11）：
  obj.attachEvent(事件名稱，處理函數(shù));

  btn.attachEvent("onclick",fun1);
  btn.attachEvent("onclick",fun2);
  //IE9,10：觸發(fā)時正序的；this指window。
  //IE8及以下：觸發(fā)時倒序的，即先觸發(fā)fun2,再觸發(fā)fan1。this指object。

• 其他瀏覽器及IE11（IE8及以下不支持）：
  obj.addEventListener(事件名稱<不加on>，處理函數(shù)，是否捕獲<true:捕獲；false:冒泡(默認(rèn)值)>)

  btn.addEventListener("click",fun1,true);
  btn.addEventListener("click",fun2);//最后一個參數(shù)可不寫。
  //觸發(fā)順序是正序。this指觸發(fā)該事件的對象，即button。

• 兼容處理：

  function bind(obj,ev,fun){
   obj.attachEvent ? obj.attachEvent("on"+ev,fun) : obj.addEventListener(ev,fun);
  }

8.事件取消

• 傳統(tǒng)事件的取消

  oDiv.onclick=function(){
   alert("A");
   oDiv.onclick=null;
  }

• 綁定事件的取消

  oDiv.removeEventListener("click",fun);//有第三個參數(shù)：true/false;
  oDiv.detachEvent("onclick",fun);

9.阻止默認(rèn)事件

(1) 默認(rèn)行為：當(dāng)事件發(fā)生時，瀏覽器會默認(rèn)做的事情。

(2) 阻止默認(rèn)行為：當(dāng)這個事件發(fā)生時，在處理函數(shù)里使用return false；如：
document.oncontextmenu=function(){return false;}//阻止右擊菜單的顯示。contextmenu指上下文事件。

(3) IE8及以下不兼容，使用全局捕獲（只能IE使用）。

(4) 用事件綁定方式的默認(rèn)事件清除：

window.onload=function(){
     document.addEventListener("contextmenu",function(ev){
                var ev=ev||event;
//              ev.preventDefault();
                ev.returnValue=false;
        },false);

        document.attachEvent("oncontextmenu",function(){
                var ev=ev||event;
                ev.returnValue=false;
//                return false;
        })
}