事件绑定-addEventListener()和attachEvent()的区别及用法

十二啊

已于 2022-05-09 08:26:22 修改

阅读量848

点赞数 1

分类专栏：十二的 Javascript 之路文章标签： javascript 前端 jquery

于 2022-04-30 23:36:43 首次发布

十二

本文链接：https://blog.csdn.net/qq_42543177/article/details/124520775

版权

十二的 Javascript 之路专栏收录该内容

22 篇文章 0 订阅

订阅专栏

JavaScript-DOM-事件绑定

当我们为元素绑定一个单击事件时，通常会想到element.οnclick=function(){}，但是要绑定多个单击函数时却会失效，并且会被最新的响应函数覆盖。所以就有了addEventListener()方法，但是IE8及以下不支持。

addEventListener()

该方法可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件触发时，响应函数将会按照函数的绑定顺序执行。有三个参数表示内容如下：

事件的字符串，不要on如：click而不是onclick。
回调函数，当事件触发时该函数被调用。
是否在捕获阶段触发事件，需要一个布尔值，true表示在捕获阶段触发，false则相反。一般都为false。

attachEvent()

IE8及以下不支持addEventListener()，可以通过attachEvent()为一个元素的相同事件同时绑定多个响应函数。但是事件触发时，响应函数将会后绑定先执行，与addEventListener()相反，用法相似，有两个参数：

事件的字符串，要on 如：onclick而不是click
回调函数，当事件触发时该函数被调用

注意

需要注意的是addEventListener()中的this是绑定事件的对象，attachEvent()中的this是window对象，this是谁是由调用方式决定的。call()、apply()、bind()都可以用来重定义this对象对于三种方法可以参考这篇讲解：JavaScript 中 call()、apply()、bind() 的用法。那对于浏览器调用的this我们不可修改，可以在匿名函数中调用回调函数，拿回修改权力。迂回修改！

示例

通过为按钮单击事件绑定多个响应函数的例子来试一试以上方法。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>DOM-事件绑定示例</title>
    <script>
        window.onload = function () {
            let btn = document.getElementsByTagName('button')[0];
            /*
             * 绑定函数
             * 参数：
             *  obj: 要绑定事件的对象
             *  enentStr：事件的字符串（不要on）
             *  callback：回调函数
             */
            function bind(obj, enentStr, callback) {
            	// 兼容判断
                if (obj.addEventListener) {
                    // 大部分浏览器兼容
                    obj.addEventListener(enentStr, callback, false);
                } else {
                    // IE8以下，事件名需要on
                    obj.attachEvent('on' + enentStr, function () {
                        // 浏览器调用不可修改，在匿名函数中调用回调函数，拿回修改权力
                        callback.call(obj);
                    });
                }
            }
            // 调用绑定函数
            bind(btn, 'click', function () {
                alert(this);
            })
            bind(btn, 'click', function () {
                alert('hello 啊');
            })
        }
    </script>
</head>

<body>
    <button>点我</button>
</body>

</html>