目錄

Tips

1. 繫結事件的區別

2.為元素解綁事件

3.事件冒泡

程式碼

1.為元素繫結事件和解綁事件的相容程式碼

2.為同一個元素繫結多個不同的事件,指向相同的事件處理函式

Tips

1. 繫結事件的區別

•    addEventListener();
•    attachEvent()
•    相同點: 都可以為元素繫結事件
•    不同點:   1.方法名不一樣
     2.引數個數不一樣addEventListener三個引數,attachEvent兩個引數
     3.addEventListener 谷歌,火狐,IE11支援,IE8不支援
       attachEvent 谷歌火狐不支援,IE11不支援,IE8支援
     4.this不同,addEventListener 中的this是當前繫結事件的物件
      attachEvent中的this是window
     5.addEventListener中事件的型別(事件的名字)沒有on
     attachEvent中的事件的型別(事件的名字)有on

2.為元素解綁事件

解綁事件:
注意:用什麼方式繫結事件,就應該用對應的方式解綁事件
1.解綁事件
 物件.on事件名字=事件處理函式--->繫結事件
 物件.on事件名字=null;

my$("btn").onclick=function () {
  console.log("我猥瑣");
 };
my$("btn2").onclick=function () {
 //1.解綁事件
 my$("btn").onclick=null;
};

2.解綁事件
 物件.addEventListener("沒有on的事件型別",命名函式,false);---繫結事件
物件.removeEventListener("沒有on的事件型別",函式名字,false);

  function f1() {
    console.log("第一個");
  }
  function f2() {
    console.log("第二個");
  }
  my$("btn").addEventListener("click",f1,false);
  my$("btn").addEventListener("click",f2,false);

  //點選第二個按鈕把第一個按鈕的第一個點選事件解綁
  my$("btn2").onclick=function () {
    //解綁事件的時候,需要在繫結事件的時候,使用命名函式
    my$("btn").removeEventListener("click",f1,false);
  };
 

 3.解綁事件
 物件.attachEvent("on事件型別",命名函式);---繫結事件
 物件.detachEvent("on事件型別",函式名字);

 function f1() {
    console.log("第一個");
  }
  function f2() {
    console.log("第二個");
  }
  my$("btn").attachEvent("onclick",f1);
  my$("btn").attachEvent("onclick",f2);

  my$("btn2").onclick=function () {
      my$("btn").detachEvent("onclick",f1);
  };

3.事件冒泡

   事件冒泡:多個元素巢狀,有層次關係,這些元素都註冊了相同的事件,如果裡面的元素的事件觸發了,外面的元素的該事件自動的觸發了.

   事件有三個階段:
     1.事件捕獲階段  :從外向內
     2.事件目標階段  :最開始選擇的那個
     3.事件冒泡階段  : 從裡向外
     為元素繫結事件：
     addEventListener("沒有on的事件型別",事件處理函式,控制事件階段的)
     事件觸發的過程中,可能會出現事件冒泡的效果,為了阻止事件冒泡--->
     window.event.cancelBubble=true;谷歌,IE8支援,火狐不支援
     window.event就是一個物件,是IE中的標準
     e.stopPropagation();阻止事件冒泡---->谷歌和火狐支援
     window.event和e都是事件引數物件,一個是IE的標準,一個是火狐的標準
     事件引數e在IE8的瀏覽器中是不存在,此時用window.event來代替
     addEventListener中第三個引數是控制事件階段的
     事件的階段有三個:
     通過e.eventPhase這個屬性可以知道當前的事件是什麼階段的
     如果這個屬性的值是:
     1---->捕獲階段
     2---->目標階段
     3---->冒泡
     一般預設都是冒泡階段,很少用捕獲階段
     冒泡階段:從裡向外
     捕獲階段:從外向內

程式碼

1.為元素繫結事件和解綁事件的相容程式碼

<script>

  //繫結事件的相容
  function addEventListener(element,type,fn) {
    if(element.addEventListener){
      element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
      element.attachEvent("on"+type,fn);
    }else{
      element["on"+type]=fn;
    }
  }
  //解綁事件的相容
  //為任意的一個元素,解綁對應的事件
  function removeEventListener(element,type,fnName) {
    if(element.removeEventListener){
      element.removeEventListener(type,fnName,false);
    }else if(element.detachEvent){
      element.detachEvent("on"+type,fnName);
    }else{
      element["on"+type]=null;
    }
  }
  //測試程式碼
  function f1() {
    console.log("第一個");
  }
  function f2() {
    console.log("第二個");
  }
  addEventListener(my$("btn1"),"click",f1);
  addEventListener(my$("btn1"),"click",f2);
  my$("btn2").onclick=function () {
    removeEventListener(my$("btn1"),"click",f1);
  };


</script>

2.為同一個元素繫結多個不同的事件,指向相同的事件處理函式

<script>
  //為同一個元素繫結多個不同的事件,指向相同的事件處理函式
  my$("btn").onclick = f1;
  my$("btn").onmouseover = f1;
  my$("btn").onmouseout = f1;
  function f1(e) {
    switch (e.type) {
      case "click":
        alert("好帥哦");
        break;
      case "mouseover":
        this.style.backgroundColor = "red";
        break;
      case "mouseout":
        this.style.backgroundColor = "green";
        break;
    }
  }
  //  my$("btn").onmouseover=function (e) {
  //    console.log(e);
  //  };
</script>