首頁技術文章正文

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

更新時間:2021-10-20 來源:黑馬程序員 瀏覽量:

IT培訓班

什么是事件？

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

事件三要素

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

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

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

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


事件綁定的3種方式

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

<!-- 形式一 -->
<body>
    // onclick 其實就是html元素的一個屬性，而屬性的值需要是 一段可執(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對象；違反了HTML與JavaScript代碼相分離的原則，一般不用。


2.動態(tài)綁定 (節(jié)點對象屬性) 

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

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


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


3.事件監(jiān)聽(節(jié)點對象方法) 

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

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


移除事件監(jiān)聽 

<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)聽函數(shù)，必須與對應的addEventListener方法的參數(shù)完全一致，而且必須在同一個元素節(jié)點，否則無效。


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

分享到：
在線咨詢 我要報名
和我們在線交談！