快捷導(dǎo)航

js中事件綁定addEventListener()和attachEvent()的區(qū)別

更新時(shí)間：2025年05月22日 10:05:55 作者：十二啊

本文主要介紹了js中事件綁定addEventListener()和attachEvent()的區(qū)別,前者支持多函數(shù)綁定且順序執(zhí)行,后者IE兼容但順序相反,下面就來詳細(xì)的介紹一下,感興趣的可以了解一下

JavaScript-DOM-事件綁定

當(dāng)我們?yōu)樵亟壎ㄒ粋€(gè)單擊事件時(shí)，通常會(huì)想到element.οnclick=function(){}，但是要綁定多個(gè)單擊函數(shù)時(shí)卻會(huì)失效，并且會(huì)被最新的響應(yīng)函數(shù)覆蓋。所以就有了addEventListener()方法，但是IE8及以下不支持。

addEventListener()

該方法可以同時(shí)為一個(gè)元素的相同事件同時(shí)綁定多個(gè)響應(yīng)函數(shù)，這樣當(dāng)事件觸發(fā)時(shí)，響應(yīng)函數(shù)將會(huì)按照函數(shù)的綁定順序執(zhí)行。有三個(gè)參數(shù)表示內(nèi)容如下：

事件的字符串，不要on如：click而不是onclick。
回調(diào)函數(shù)，當(dāng)事件觸發(fā)時(shí)該函數(shù)被調(diào)用。
是否在捕獲階段觸發(fā)事件，需要一個(gè)布爾值，true表示在捕獲階段觸發(fā)，false則相反。一般都為false。

attachEvent()

IE8及以下不支持addEventListener()，可以通過attachEvent()為一個(gè)元素的相同事件同時(shí)綁定多個(gè)響應(yīng)函數(shù)。但是事件觸發(fā)時(shí)，響應(yīng)函數(shù)將會(huì)后綁定先執(zhí)行，與addEventListener()相反，用法相似，有兩個(gè)參數(shù)：

事件的字符串，要on 如：onclick而不是click
回調(diào)函數(shù)，當(dāng)事件觸發(fā)時(shí)該函數(shù)被調(diào)用

注意

需要注意的是addEventListener()中的this是綁定事件的對象，attachEvent()中的this是window對象，this是誰是由調(diào)用方式?jīng)Q定的。call()、apply()、bind()都可以用來重定義this對象對于三種方法可以參考這篇講解：JavaScript 中 call()、apply()、bind() 的用法。那對于瀏覽器調(diào)用的this我們不可修改，可以在匿名函數(shù)中調(diào)用回調(diào)函數(shù)，拿回修改權(quán)力。迂回修改！

示例

通過為按鈕單擊事件綁定多個(gè)響應(yīng)函數(shù)的例子來試一試以上方法。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>DOM-事件綁定示例</title>
    <script>
        window.onload = function () {
            let btn = document.getElementsByTagName('button')[0];
            /*
             * 綁定函數(shù)
             * 參數(shù)：
             *  obj: 要綁定事件的對象
             *  enentStr：事件的字符串（不要on）
             *  callback：回調(diào)函數(shù)
             */
            function bind(obj, enentStr, callback) {
            	// 兼容判斷
                if (obj.addEventListener) {
                    // 大部分瀏覽器兼容
                    obj.addEventListener(enentStr, callback, false);
                } else {
                    // IE8以下，事件名需要on
                    obj.attachEvent('on' + enentStr, function () {
                        // 瀏覽器調(diào)用不可修改，在匿名函數(shù)中調(diào)用回調(diào)函數(shù)，拿回修改權(quán)力
                        callback.call(obj);
                    });
                }
            }
            // 調(diào)用綁定函數(shù)
            bind(btn, 'click', function () {
                alert(this);
            })
            bind(btn, 'click', function () {
                alert('hello 啊');
            })
        }
    </script>
</head>

<body>
    <button>點(diǎn)我</button>
</body>

</html>

到此這篇關(guān)于js中事件綁定addEventListener()和attachEvent()的區(qū)別的文章就介紹到這了,更多相關(guān)addEventListener()和attachEvent()區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: