JS綁定事件的方法有哪些？

更新時(shí)間:2021-10-20 來(lái)源:黑馬程序員瀏覽量:

IT培訓(xùn)班

什么是事件？

事件是指可以被JavaScript偵測(cè)到的行為，是一種“觸發(fā)-響應(yīng)”的機(jī)制。這些行為指的就是頁(yè)面的加載、鼠標(biāo)的單擊/雙擊、鼠標(biāo)指針滑某個(gè)區(qū)域等具體的動(dòng)作，它對(duì)實(shí)現(xiàn)頁(yè)面的交互效果起著非常重要的作用。事件由事件源、事件類型和事件處理程序3部分構(gòu)成，又被稱為“事件三要素”。

事件三要素

事件源：觸發(fā)(被)事件的元素

事件類型：事件的觸發(fā)方式(例如鼠標(biāo)點(diǎn)擊或鍵盤點(diǎn)擊)

事件處理程序：事件觸發(fā)后要執(zhí)行的代碼(函數(shù)形式)

以上的三個(gè)要素可以簡(jiǎn)單理解為“誰(shuí)觸發(fā)了事件”、“觸發(fā)了什么事件”、“觸發(fā)了事件之后要做什么”。

事件綁定的3種方式

1.行內(nèi)方式綁定(元素屬性)

<!-- 形式一 -->
<body>
    // onclick 其實(shí)就是html元素的一個(gè)屬性，而屬性的值需要是 一段可執(zhí)行的JS代碼
    <input type="button" value="按鈕" id="btn" onclick="alert(2)">
</body>


<!-- 形式二 -->
<body>
    <input type="button" value="按鈕" id="btn" onclick="f()">
</body>
<script>
    function f(){
        console.log(3);
    }
</script>

行內(nèi)方式綁定處理函數(shù)中this指向的window對(duì)象；違反了HTML與JavaScript代碼相分離的原則，一般不用。

2.動(dòng)態(tài)綁定 (節(jié)點(diǎn)對(duì)象屬性)

<body>
    <input type="button" value="按鈕" id="btn">
</body>
<script>
    var btn = document.getElementById('btn');
        btn.onclick = function(){
            alert(4);
        }
</script>

獲取節(jié)點(diǎn)對(duì)象，然后修改節(jié)點(diǎn)對(duì)象的屬性onclick的值，值是一個(gè)匿名函數(shù)即可；

動(dòng)態(tài)綁定缺點(diǎn)是同一元素同一個(gè)事件只能定義一個(gè)監(jiān)聽(tīng)函數(shù)，也就是說(shuō)，如果定義兩次onclick屬性，后一次定義會(huì)覆蓋前一次；處理函數(shù)中的this指向的選中的對(duì)象。

3.事件監(jiān)聽(tīng)(節(jié)點(diǎn)對(duì)象方法)

<body>
    <input type="button" value="按鈕" id="btn">
</body>
<script>
    var btn = document.getElementById('btn');
        btn.addEventListener('click',function(){
            alert(5);
        });
</script>

每一個(gè)節(jié)點(diǎn)對(duì)象都提供了addEventListener方法，這個(gè)方法可以給選中的節(jié)點(diǎn)添加指定類型的事件及事件處理程序。

移除事件監(jiān)聽(tīng)

<body>
    <input type="button" value="按鈕" id="btn">
</body>
<script>
    function f(){
        alert(5);
    }
    var btn = document.getElementById('btn');
    btn.addEventListener('click',f);
    btn.removeEventListener('click',f);
</script>

注意：removeEventListener方法移除的監(jiān)聽(tīng)函數(shù)，必須與對(duì)應(yīng)的addEventListener方法的參數(shù)完全一致，而且必須在同一個(gè)元素節(jié)點(diǎn)，否則無(wú)效。

事件監(jiān)聽(tīng)的addEventListener方法可以針對(duì)同一個(gè)元素的同一個(gè)事件，添加多個(gè)監(jiān)聽(tīng)處理函數(shù)。處理函數(shù)中的this指向的也是選中的元素。

上一篇：什么是原型鏈?如何理解原型鏈? 下一篇：jQuery的4種常見(jiàn)動(dòng)畫效果