绑定/解绑事件兼容代码

发表于 | 分类于 |

为元素绑定( 多个 )事件(DOM)除了用对象.onclick=fn这类的方式（这种方式无法绑定多个事件，如果写了多个事件则会发生覆盖），还有：
1 对象.addEventListener(“事件类型”,事件处理函数,false)–谷歌、火狐和IE9、10、11支持,IE8不支持
2 对象.attachEvent(“有on的事件类型”,事件处理函数)–谷歌不支持,火狐不支持,IE8支持，但是IE11不支持

addEventListener

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//为按钮绑定点击事件
  //参数1:事件的类型---事件的名字,没有on
  //参数2:事件处理函数---函数(命名函数,匿名函数)
  //参数3:布尔类型

  //为同一个元素绑定多个相同的事件--
 my$("btn").addEventListener("click",function () {//my$函数封装了getElementById
   console.log("哈哈哈");
 },false);
 my$("btn").addEventListener("click",function () {
   console.log("嘿嘿嘿");
 },false);
 my$("btn").addEventListener("click",function () {
   console.log("喵喵喵");
 },false);
 my$("btn").addEventListener("click",function () {
   console.log("呜呜呜");
 },false);


##attachEvent

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//参数1:事件类型---事件名字，有on
//参数2:事件处理函数---函数(命名函数,匿名函数)

my$("btn").attachEvent("onclick",function () {
  console.log("哈哈哈哈哈");
});

my$("btn").attachEvent("onclick",function () {
  console.log("吼吼吼吼吼");
});

my$("btn").attachEvent("onclick",function () {
  console.log("嘻嘻嘻嘻嘻");
});


两者的区别

总结绑定事件的区别: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

绑定/解绑兼容性代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试草稿</title>
</head>
<body>
    <input type="button" value="添加" id="btn">
    <input type="button" value="删除" id="del">
    <div id="dv"></div> 
</body>
</html>

JavaScript部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script>
        function my$(id) {
            return document.getElementById(id);
        }
        //绑定事件的兼容代码
        function addEventListener(element,type,fn){//调用时此处的fn可以是匿名函数也可以是命名函数的函数名
            if(element.addEventListener){
                element.addEventListener(type,fn,false);
            }else if(element.attachEvent){
                element.attachEvent("on"+type,fn);//注意此处的"on"不可省略
            }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);//注意此处的"on"不可省略
            }else {
                element["on"+type]=null;
            }
        }

        function f1(){
            var pObj = document.createElement("p");
            pObj.innerText = "来了老弟~";
            my$("dv").appendChild(pObj);
        }
        function f2(){
            var spanObj = document.createElement("span");
            spanObj.innerText = "好嗨哟~";
            my$("dv").appendChild(spanObj);
        }

        addEventListener(my$("btn"),"click",f1);
        addEventListener(my$("btn"),"click",f2);

        my$("del").onclick = function(){
            removeEventListener(my$("btn"),"click",f1);
            removeEventListener(my$("btn"),"click",f2);
        }
    </script>