更新時間:2021-10-20 來源:黑馬程序員 瀏覽量:
什么是事件？
事件是指可以被JavaScript偵測到的行為，是一種“觸發(fā)-響應”的機制。這些行為指的就是頁面的加載、鼠標的單擊/雙擊、鼠標指針滑某個區(qū)域等具體的動作，它對實現(xiàn)頁面的交互效果起著非常重要的作用。事件由事件源、事件類型和事件處理程序3部分構成，又被稱為“事件三要素”。
事件三要素
事件源：觸發(fā)(被)事件的元素
事件類型：事件的觸發(fā)方式(例如鼠標點擊或鍵盤點擊)
事件處理程序：事件觸發(fā)后要執(zhí)行的代碼(函數形式)
以上的三個要素可以簡單理解為“誰觸發(fā)了事件”、“觸發(fā)了什么事件”、“觸發(fā)了事件之后要做什么”。
1.行內方式綁定(元素屬性)
JavaEE
鴻蒙應用開發(fā)
HTML&JS+前端
Python+大數據開發(fā)
人工智能開發(fā)
AI+設計
軟件測試
新媒體+短視頻
集成電路應用開發(fā)
AI+Linux云計算運維
<!-- 形式一 -->
<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指向的也是選中的元素。
.jpg)