更新時(shí)間:2021-10-20 來(lái)源:黑馬程序員 瀏覽量:
什么是事件?
事件是指可以被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ā)了事件之后要做什么”。
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指向的也是選中的元素。