首頁技術文章正文

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

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

IT培訓班

什么是事件?

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

事件三要素

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

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

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

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


事件綁定的3種方式

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

<!-- 形式一 -->
<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>

行內方式綁定處理函數中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的值,值是一個匿名函數即可;


動態(tài)綁定缺點是同一元素同一個事件只能定義一個監(jiān)聽函數,也就是說,如果定義兩次onclick屬性,后一次定義會覆蓋前一次;處理函數中的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)聽函數,必須與對應的addEventListener方法的參數完全一致,而且必須在同一個元素節(jié)點,否則無效。


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

分享到:
在線咨詢 我要報名
和我們在線交談!