JavaScript onclick與addEventListener使用的區(qū)別介紹

更新時(shí)間：2022年09月02日 09:48:48 作者：搞前端的小菜

addEventListener()方法用于向指定元素添加事件句柄，使用 removeEventListener()方法來移除，onclick和addEventListener事件區(qū)別是：onclick事件會(huì)被覆蓋，而addEventListener可以先后運(yùn)行不會(huì)被覆蓋，addEventListener可以監(jiān)聽多個(gè)事件

摘要

當(dāng)我們想要給某個(gè)DOM元素綁定事件的時(shí)候，最常用的方法是通過on + 事件名字的方式。而在DOM2級(jí)事件定義了兩個(gè)方法，用于處理指定和刪除事件處理程序的操作：

addEventListener()和removeEventListener().

并且它們都接受三個(gè)參數(shù)：要處理的事件名，作為事件處理的一個(gè)函數(shù)，一個(gè)布爾值。

最后的布爾值如果為false，表示在冒泡階段調(diào)用事件處理函數(shù)，如果是true，表示在捕獲階段調(diào)用事件處理程序。

區(qū)別

同時(shí)綁定多個(gè)事件

我們來想一個(gè)問題，我們使用onclick方法可不可以給一個(gè)按鈕綁定多個(gè)事件呢？

我們來嘗試一下：

    <button id="btn">點(diǎn)擊</button>
    <script>
        btn.onclick = function(){
            console.log('第一次點(diǎn)擊');
        }
        btn.onclick = function(){
            console.log('第二次點(diǎn)擊');
        }
    </script>

然后我們來看一下結(jié)果是否兩次都打印出來了：

可以看到只有第二次生效了，說明通過這種方法第二次綁定事件會(huì)將第一次覆蓋！

現(xiàn)在我們來用第二種方法：

    <button id="btn">點(diǎn)擊</button>
    <script>
        btn.addEventListener('click',()=>{console.log('第一次點(diǎn)擊');},false);
        btn.addEventListener('click',()=>{console.log('第二次點(diǎn)擊'),false});
    </script>

我們來看一下運(yùn)行結(jié)果：

OK，可以看到通過這種方式我們是可以進(jìn)行多次綁定事件的。

決定事件觸發(fā)順序

我們先來看一下代碼：

    <div id="div1">
        <button id="btn">點(diǎn)擊</button>
    </div>
    <script>
        div1.onclick = function(){
            console.log('div1的事件');
        }
        btn.onclick = function(){
            console.log('btn的事件');
        }
    </script>

想一下如果我們點(diǎn)擊了按鈕，打印的順序應(yīng)該是什么樣子的呢？

可以看到是從內(nèi)而外，是以事件冒泡的方式來執(zhí)行的。

而如果使用另一種方法：

    <div id="div1">
        <button id="btn">點(diǎn)擊</button>
    </div>
    <script>
        btn.onclick = function(){
            console.log('btn的事件');
        }
        div1.addEventListener('click',()=>{console.log('div1的事件');},true);
    </script>

我現(xiàn)在把div1的事件通過addEventListener的方式來綁定，并且給第三個(gè)參數(shù)設(shè)置為true。

那么結(jié)果就是這樣的：

所以我們通過第二種方法我們可以決定DOM事件的觸發(fā)是以事件捕獲的事件流還是事件冒泡的事件流方式。

removeEventListener的使用方法

這個(gè)方法就是刪除DOM指定的事件，如果我們刪除onclick的話，直接將onclick的值設(shè)置為null就可以了。

那這個(gè)方法如何刪除呢？我們來看一下代碼：

        div1.addEventListener('click',()=>{console.log('div1的事件');},true);
        div1.removeEventListener('click',()=>{console.log('div1的事件');},true);

這樣做的話我們是否能將這個(gè)事件刪除呢？答案是否定的，我們的兩個(gè)事件處理程序雖然代碼是一樣的，但是它們確確實(shí)實(shí)不是一個(gè)事件處理程序，如果我們想要?jiǎng)h除掉某個(gè)事件，我們必須這樣做：

        var fn = function(){
            console.log('div1的事件');
        }
        div1.addEventListener('click',fn,true);
        div1.removeEventListener('click',fn,true);

只有這樣才能確定兩個(gè)方法所用的為一段事件處理程序，也是有效的刪除方法。

到此這篇關(guān)于JavaScript onclick與addEventListener使用的區(qū)別介紹的文章就介紹到這了,更多相關(guān)JS onclick與addEventListener區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: