NEWS

新闻资讯

当前位置首页 > 新闻资讯 > 正文

JS事件绑定的addEventListener绑定方式

作者:小菁 时间:2021-04-27

本文主要介绍了JS事件绑定的addEventListener绑定方式(其中提及了另外两种绑定方式),结合实例形式总结分析了javascript三种常见的事件绑定原理与操作技巧,分享给大家

方式一:直接在 DOM 元素上进行绑定

<input id="btn1" type="button" onclick="test();" />

方式二:用 on 绑定

不管是直接在DOM元素上进行绑定,还是用on绑定,都是直接为对象绑定一个事件处理函数,但是这种方法会导致事件的覆盖。

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

//obj.onclick = fn;

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

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

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

方式三:用 addEventListener 绑定

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 元素有效。