事件绑定的第二种形式

Posted 2020-08-30

一、过去，给一个对象绑定一个事件，来处理函数的形式，如obj.onclick=fn1，我们称之为事件绑定的第一种形式（赋值形式）。

　　这种形式的有一种缺点就是：同一个对象的同一个事件不能同时处理两个不同的函数。

　　例如：

            function fn1(){
                alert("A")
            }
            function fn2(){
                alert("B")
            }
            document.onclick=fn1;
            document.onclick=fn2;//后面一个事件会覆盖前面一个事件

二、为了解决上面出现的问题：即同一个对象的同一个事件能绑定不同的事件。这种方法我们称之为事件绑定的第二种形式。（函数形式）

　　在IE下和标准浏览器下，需要做兼容：

　1、　IE（<ie9）：obj.attachEven(‘事件名‘,函数名) 例如：document.attachEvent(‘onclick‘,fn1);等同于上面document.onclick=fn1;　

　　　　　　　　　1、没有捕获；

　　　　　　　　　2、事件名称有on;

　　　　　　　　　3、函数执行的顺序：在标准IE下，是正序的；非标准IE下，是倒叙的，从后往前执行。

　　　　　　　　　4、函数里面的this，指向的不是触发事件的对象，而是window　.

　　　　　　　　　　解决方法：call().

　　　　　　　　　　call（）是函数内的一种的方法。调用函数:fn1()等同于fn1.call（）；

　　　　　　　　　　！！！特别重要的是，call()里面的第一个参数可以改变函数执行过程中内部this的指向。从第二个参数开始，就是原函数的参数

　　　　　　　　　　如果call方法的第一个参数是null，那么就不会改变this的指向。　　　　　　　　　　　

function fn1(a,b){
                alert(this);
                alert(a+b)
            }
            fn1.call(document,10,20);

　2、　标准(>ie9;FF;chrome等等)：obj.addEventListener(‘事件名‘,函数名，是否捕捉);;;是否捕捉:默认为false.事件名:没有on　

　　　　　　　　　1、有捕获；

　　　　　　　　　2、事件名称没有on;

　　　　　　　　　3、函数执行的顺序为正序。

　　　　　　最后，封装一个函数，解决兼容问题：

            function bind(obj,evName,fn){
                if(obj.addEventListener){
                    obj.addEventListener(evName,fn)
                }else{
                    obj.attachEvent(‘on‘+evName,function(){
                        fn.call(obj)
                    })
                }
            }
            bind(documen,click,fn1);
            bind(documen,click,fn2)