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>

JS中的DOM操作（四）