事件绑定的第二种形式

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了事件绑定的第二种形式相关的知识,希望对你有一定的参考价值。

一、过去,给一个对象绑定一个事件,来处理函数的形式,如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)

 

 

 

 

 

 

 

  

以上是关于事件绑定的第二种形式的主要内容,如果未能解决你的问题,请参考以下文章

js中事件绑定

线程创建的第二种方法

如何获取表单上的所有绑定源

事件捕获

事件捕获

14.9属性的第二种表达方式