首页>前端教程>JavaScript教程

DOM基础7:事件绑定的第二种方式addEventListener

以前都是直接为对象绑定一个事件处理函数,但是这种方法会导致事件的覆盖。

//给一个对象绑定一个事件处理函数的第一种形式

//obj.onclick = fn;

function fn1() {
    alert(this);
}
function fn2() {
    alert(2);
}

document.onclick = fn1;
document.onclick = fn2;   //会覆盖前面绑定的fn1

给一个对象的同一个事件绑定多个不同的函数,则需要使用第二种形式。

W3C规范:addEventListener()的工作原理是将实现EventListener的函数或对象添加到调用它的EventTarget上的指定事件类型的事件侦听器列表中。

IE9+和chrome等标准浏览器都支持。

IE8及以下非标准的需要使用attachEvent(),这个方法在IE11以后被抛弃。

IE:obj.attachEvent(事件名称,事件函数);

    1.没有捕获

    2.事件名称有on

    3.事件函数执行的顺序:标准ie-》正序   非标准ie-》倒序

    4.this指向window

标准:obj.addEventListener(事件名称,事件函数,是否捕获);

    1.有捕获

    2.事件名称没有on

    3.事件执行的顺序是正序

    4.this指向触发该事件的对象

document.attachEvent('onclick', function() {
    fn1.call(document);
});
document.attachEvent('onclick', fn2);
//是否捕获 : 默认是false    false:冒泡 true:捕获

document.addEventListener('click', fn1, false);
document.addEventListener('click', fn2, false);

可以封装一个函数来解决这个兼容性问题:

function bind(obj, evname, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evname, fn, false);
    } 
    else{
        obj.attachEvent('on' + evname, function() {
            fn.call(obj);
        });
    }
}

bind(document, 'click', fn1);
bind(document, 'click', fn2);

注意:call()是函数下的一个方法,call方法第一个参数可以改变函数执行过程中的内部this的指向,call方法第二个参数开始就是原来函数的参数列表。

var oDiv = document.querySelector("#box");

function fn1(a, b) {
alert(this);
console.log(a + b);
}
// fn1(4,5);

oDiv.onclick = function () {
// null:表示this指向window。
// fn1.call(null,4,2);
// 表示this指向oDiv这个对象。
   fn1.call(oDiv, 4, 2);
}

addEventListener() 是 W3C DOM 规范中提供的注册事件监听器的方法。它的优点包括:

它允许给一个事件注册多个监听器。 特别是在使用AJAX库,JavaScript模块,或其他需要第三方库/插件的代码。

它提供了一种更精细的手段控制 listener 的触发阶段。(即可以选择捕获或者冒泡)。

它对任何 DOM 元素都是有效的,而不仅仅只对 HTML 元素有效。

点赞


1
保存到:

相关文章

Top