首页 > 代码库 > 事件绑定的第二种形式
事件绑定的第二种形式
一、过去,给一个对象绑定一个事件,来处理函数的形式,如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)
事件绑定的第二种形式