.attachEvent() / .addEventListener() —— 事件函数的绑定
一、第一种
写法:元素.事件名= 函数名;
document.onclick = fn1; function fn1() { alert(1); }
缺点:给同一个对象的同一个事件只能绑定一个的函数,如果绑定多个会覆盖前面绑定f函数
document.onclick = fn1; document.onclick = fn2; //会覆盖前面绑定fn1
兼容性:无
二、第二种
优点:可以给一个对象的同一个事件绑定多个不同的函数
兼容性:
1、IE下:
(1)写法:元素.attachEvent(事件名称,事件函数);
document.attachEvent('onclick', fn2);
(2)是否捕获:不存在捕获
(3)执行顺序
标准IE下:按照代码的编写顺序执行
IE678:后写的先执行
(4)事件名称写法:事件名称有on
(5)this指向:window(需要解决的问题)
(6)this指向解决办法:call
写法:函数名.call(this指向,函数的参数)
描述:call是函数下的一个方法,call方法第一个参数可以改变函数执行过程中的内部this的指向,call方法第二个参数开始就是原来函数的参数列表
fn1.call(null, 10, 20); //null说明不改变this指向,10代表fn1函数的a,20代表fn1函数的b function fn1(a, b) { alert(this); //window,如果第一个参数是1,这里就弹出1 alert(a + b); //30 }
函数调用:fn1( )和 fn1.call() 的作用是一样的
2、标准浏览器下(非IE)
(1)写法:元素.addEventListener(事件名称,事件函数,是否捕获);
document.addEventListener('click', fn1, false);
(2)参数含义:
参数1:必须。字符串。不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"
参数2:必须
参数3:可选。布尔值
①true :捕获
②false :默认。冒泡
(3)执行顺序:按照代码的编写顺序执行
(4)事件名称写法:事件名称没有on
(5)this指向:触发该事件的对象
3、解决兼容问题封装的函数
function bind(obj, evname, fn) { if (obj.addEventListener) { //如果存在addEventListener说明是标准浏览器(非IE) obj.addEventListener(evname, fn, false); //事件名称、函数名称、不捕获 } else { //IE浏览器 obj.attachEvent('on' + evname, function() { //用attachEvent()方法,事件名称加on,因为IEthis指向不正常,所以设置this指向 fn.call(obj); //this的指向为绑定函数的对象 }); } } bind(document, 'click', fn1); bind(document, 'click', fn2); //可以给同一个对象的同一个事件设置多个绑定的函数
(1)参数:
参数1:绑定的对象
参数2:事件名称(因为标准浏览器没有on,IE浏览器有on所以这里不写on)
参数3:绑定的函数