.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：绑定的函数