事件驅(qū)動(dòng)三要素

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

事件：被JavaScript檢測(cè)到的行為。例如：

　　　鼠標(biāo)點(diǎn)擊

　　　鍵盤按鍵

　　　選輸入框

事件處理函數(shù)：事件發(fā)生時(shí)要進(jìn)行的操作，又叫做“事件句柄”或“事件監(jiān)聽(tīng)器”

?

事件分類：

鼠標(biāo)事件： ? ?click 　　　　鼠標(biāo)點(diǎn)擊操作

　　　　　 　dblclick　　 ??鼠標(biāo)雙擊操作

　　　　　　mousedown ? ?按下鼠標(biāo)按鍵

　　　　　　mousemove　鼠標(biāo)指針在元素上方移動(dòng)

　　　　　　mouseover ? ? 鼠標(biāo)指針進(jìn)入元素

　　　　　　mouseout·　 ?鼠標(biāo)指針移出元素

鍵盤事件：　keydown　　 ?按下鍵盤按鍵

　　　　　　keyup　　 ? ? ?抬起鍵盤按鍵

　　　　　　keypress ? ? ? ?按下或按住鍵盤按鍵

表單事件： ? focus ? ? ? ? ? ? ?input獲得焦點(diǎn)

　　　　　　blur 　　　　?input失去焦點(diǎn)

　　　　　　change 　　 ?更改input元素的內(nèi)容

頁(yè)面事件： ? load　　　　 ?頁(yè)面加載完成

?

事件綁定

HTML標(biāo)簽的事件屬性

1 <input type = "button" id = "btn" value = "點(diǎn)擊" ouclick = "test()"/>

?1 function(){ 2 //.... 3 }?

DOM標(biāo)準(zhǔn)的事件

通過(guò)on加事件類型的方式去綁定事件，也屬于DOM 0 級(jí)事件，例：

1 <input type="button" id = "btn" value= "點(diǎn)擊"/> 2 3 //方式一： 4 btn.onclick = function(){ 5 //... 6 } 7 8 9 //方式二： 10 function test(){ 11 //... 12 } 13 btn.onclick = test;

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

DOM提供了事件監(jiān)聽(tīng)器，可以同時(shí)綁定或刪除多個(gè)事件，并且具有多個(gè)事件處理函數(shù)。屬于DOM 2級(jí)事件

綁定：

?1 事件源.addEventListener(eventName, functionName, boolean);?

刪除：

?1 事件源.removeEventListener(eventName, functionName, boolean);?

參數(shù)說(shuō)明：

eventName:為元素指定具體的事件名稱（例如單擊事件是click等）；

functionName: 綁定事件的處理函數(shù)；

boolean:布爾值，默認(rèn)為false。

綁定：

1 <input type ="button" id = "btn" value = "點(diǎn)擊"/> 2 3 btn.addEventListener('click'.function(){ 4 console.log('xxxxx'); 5 },false);

刪除：

1 function handle(){ 2 console.log('xxx'); 3 } 4 //綁定事件 5 btn.addEventListener("click",handle,false); 6 //刪除事件 7 btn.removeEventListener("click",handle,false);

addEventListener() 方法還可以為指定一個(gè)元素綁定一個(gè)事件同時(shí)具有多個(gè)處理函數(shù)。如下代碼示例:

1 btn.addEventListener('click'.function(){ 2 console.log('第一次執(zhí)行'); 3 },false); 4 btn.addEventListener('click'.function(){ 5 console.log('第二次執(zhí)行'); 6 },false);

?

轉(zhuǎn)載于:https://www.cnblogs.com/amag/p/7471139.html

總結(jié)

以上是生活随笔為你收集整理的Event 事件 - 基础的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。