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

 

posted @ 2017-04-11 18:00  念念念不忘  阅读(342)  评论(0)    收藏  举报