JavaScript-addEventListener()

最新推荐文章于 2025-02-06 15:02:19 发布

飒小北

最新推荐文章于 2025-02-06 15:02:19 发布

阅读量478

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript addEventListener

本文链接：https://blog.youkuaiyun.com/tian_tian_gong/article/details/87630984

JavaScript 专栏收录该内容

37 篇文章

订阅专栏

addEventListener() 方法用于在JavaScript中添加事件处理，允许同时绑定多个事件处理函数，按顺序执行。它在IE8及以下版本不被支持，而attachEvent是IE8及其以下的兼容方式，但不适用于其他浏览器。当使用addEventListener时，回调函数内的this指向当前绑定事件的元素，而在attachEvent中，this指向window。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

addEventListener() 方法用于向指定元素添加事件句柄。
正常我们为一个标签元素绑定事件可以这么写:
xxx.οnclick=function(){
}
但当我们有同一个事件想绑定多个函数的时候，上面的事件函数就会只执行最后的一个，前面的被覆盖掉。此时可以选择用addEventListener这种方法来为标签绑定事件。
注意:
addEventListener() ie8及以下不支持
//-通过这个方法也可以为元素绑定响应函数,可以同时为一个元素的相同事件同时绑定多个响应函数。按照事件绑定的顺序执行。
//-参数
// 1.事件的字符串，不要on
// 2.回调函数，当事件触发时改函数会被调用
// 3. 是否在捕获阶段触发事件，需要一个Boolean值，一般都传false

	 btn01.addEventListener("click", function () {
            alert(1);
        }, false)

        btn01.addEventListener("click", function () {
            alert(2);
        }, false)

执行结果: 依次alert 1 2

ie8 attachEvent 兼容ie浏览器，不兼容其他浏览器，两个参数，第一个是事件名称，有on，第二个是回调函数。
注意:
addEventListener（）回调函数里面的this是当前绑定事件的元素，而attachEvent里面的this是window。

	 btn01.attachEvent("onclick", function () {
                alert(3);
            });

兼容写法

	 //兼容所有浏览器
        function bind(obj, eventStr, callback) {
            //大部分浏览器的兼容方式
            if (obj.addEventListener) {
                obj.addEventListener(eventStr, callback, false);
            } else {
                //ie8及以下  callback.call 解决this指向 默认attachEvent是指向Window的
                obj.attachEvent("on" + eventStr, function () {
                    //在匿名函数中调回调函数
                    callback.call(obj);
                });
            }

        }
        bind(btn01, "click", function () {
            alert(this);
        })