JavaScript addEventListener()
addEventListener方法可以為事件註冊監聽器,也就是註冊事件處理函式。
本文將解決如下三個問題:
(1).為什麼要註冊事件監聽器(事件處理函式)。
(2).分解方法名稱,以便加強理解與記憶。
(3).通過程式碼例項演示此方法的具體應用方法。
(4).相容低版本IE瀏覽器。
一.為什麼要註冊事件監聽器:
預設狀態下,當我們點選普通按鈕的時候,並沒有什麼特別的反應。
這時候,不少朋友會想當然的認為"點選事件沒有觸發",這是完全錯誤的認識。
只要點選元素,事件就會觸發,之所以沒有特別反應,是因為沒有為此事件註冊監聽器。
通過事件監聽器,我們可以對事件給予響應,比如點選按鈕設定div元素的背景色。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #ant{ width: 100px; height: 50px; background-color: #ccc; } </style> <script> window.onload=function(){ let odiv=document.getElementById("ant"); let obt=document.getElementById("bt"); obt.onclick=function(){ odiv.style.backgroundColor="blue"; } } </script> </head> <body> <div id="ant"></div> <input type="button" id="bt" value="檢視效果"/> </body> </html>
點選按鈕可以將div的背景顏色設定為藍色,上述程式碼通過控制程式碼方式元素事件註冊監聽器(事件處理函式)。
本文的主角addEventListener方法註冊事件監聽器功能更加強大,後面會介紹。
JavaScript註冊事件監聽器的方式有很多,具體參閱JavaScript 註冊事件處理函式一章節。
二.addEventListener方法分解:
名稱通常與其功能密切相關,儘可能做到名副其實,addEventListener由如下三個單詞合成:
(1).add:具有"新增"的意思。
(2).event:具有"事件"的意思。
(3).listener:具有"監聽者"或者"傾聽者"的意思。
是不是經過分解之後,對於此方法的理解和記憶會有一些小的幫助。
三.addEventListener具體用法:
下面具體介紹一下此方法的如何為元素指定事件註冊監聽器。
語法結構:
[JavaScript] 純文字檢視 複製程式碼target.addEventListener(type, listener, useCapture)
引數解析:
(1).type:必需,事件的型別,比如"click"或者"mouseover"等,不能加"on","onclick"是錯誤的。
(2).listener:必需,監聽器,也就是事件處理函式。
(3).useCapture:必需,布林值,規定監聽事件階段,true表示事件捕獲階段,false表示事件冒泡階段。
關於事件傳播的兩個階段本文不做介紹,具體參閱如下兩篇文章:
(1).JavaScript 事件冒泡一章節。
(2).JavaScript 事件捕獲一章節。
瀏覽器支援:
(1).IE9+瀏覽器支援此方法。
(2).edge瀏覽器支援此方法。
(3).谷歌瀏覽器支援此方法。
(4).火狐瀏覽器支援此方法。
(5).opera瀏覽器支援此方法。
(6).safria瀏覽器支援此方法。
如果要解綁監聽器可以參閱JavaScript removeEventListener()一章節。
程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #ant{ width: 100px; height: 50px; background-color: #ccc; } </style> <script> window.onload=function(){ let odiv=document.getElementById("ant"); let obt=document.getElementById("bt"); obt.addEventListener("click",function(){ odiv.style.backgroundColor="blue"; },false); } </script> </head> <body> <div id="ant"></div> <input type="button" id="bt" value="檢視效果"/> </body> </html>
上面程式碼使用addEventListener方法為按鈕註冊click事件監聽器(事件處理函式)。
非常的簡單,有如下幾點再強調一下:
(1).事件型別前面不能加"on",寫成"onclick"是錯誤的。
(2).第三個引數值通常是false,也就是事件監聽器監聽事件傳播的階段。
下面演示一下事件捕獲階段和事件冒泡階段的不同,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box{ width:400px; height:300px; background-color:blue; } #middle{ width:300px; height:200px; background-color:green; } #inner{ width:200px; height:150px; background-color:red; } </style> <script> window.onload=function(){ let obox=document.getElementById("box"); let omiddle=document.getElementById("middle"); let oinner=document.getElementById("inner"); obox.addEventListener("click",function(){ alert("box") },true); omiddle.addEventListener("click",function(){ alert("middle") },true); oinner.addEventListener("click",function(){ alert("inner") },true); } </script> </head> <body> <div id="box"> <div id="middle"> <div id="inner"></div> </div> </div> </body> </html>
程式碼分析如下:
(1).方法的第三個引數為true,說明事件在捕獲階段會被監聽器偵聽到。
(2).現在點選最內層div,如果是監聽的冒泡階段,那麼會依次彈出inner、middle和box。
(3).然而真正的彈出順序是box、middle和inner,足以說明第三個引數的作用。
大家可以將最後一個引數改為false,再比對一下效果。
四.相容低版本IE瀏覽器:
IE9以下瀏覽器並不支援addEventListener方法,但是支援attachEvent方法。
語法結構:
[JavaScript] 純文字檢視 複製程式碼target.attachEvent(type, listener)
引數解釋:
(1).type:事件型別,比如click事件、mouseover事件等,但是前面要加"on"。
(2).listener:事件監聽器,也就是事件處理函式。有如下三點需要特別注意:
(1).此方法不符合W3C標準。
(2).事件型別前面要加"on"。
(3).this不指向註冊時間處理函式的物件。
程式碼封裝如下:
[JavaScript] 純文字檢視 複製程式碼function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); } else if(element.attachEvent){ element.attachEvent("on" + type, handler); } else{ element["on"+type]=handler; } }
上面程式碼可以相容到IE9以下瀏覽器。
相關文章
- addEventListener("touchend", function ()_devFunction
- addEventListener中的EventListener介面物件dev物件
- addEventListener(自己的學習筆記)dev筆記
- addEventListener() 第三個引數作用dev
- js 新增事件 attachEvent 和 addEventListener 的用法JS事件dev
- addEventListener()第三個引數的作用dev
- 為什麼在js中需要新增addEventListener()?JSdev
- 如何在 React 中優雅的使用 addEventListenerReactdev
- HTML addEventListener和attachEvent的區別詳解HTMLdev
- addEventListener()的第三個引數可以傳物件了dev物件
- JavaScript進階系列05,事件的執行時機, 使用addEventListener為元素同時註冊多個事件,事件引數JavaScript事件dev
- 物件不支援“addEventListener”屬性或方法 ie8 jquery物件devjQuery
- #每日一記#通過 GIF 理解 addEventListener、捕獲和冒泡dev
- addEventListener 的一些好方法 簡單粗暴的說給你dev
- 使用原生Js addEventListener給每個li元素繫結一個click事件輸出他們的順序JSdev事件
- js 註冊事件的兩種方式詳解,傳統註冊事件與方法監聽註冊事件(addEventListener)JS事件dev
- JavaScript高階:JavaScript物件導向,JavaScript內建物件,JavaScript BOM,JavaScript封裝JavaScript物件封裝
- javaScript系列[06]-javaScript和thisJavaScript
- 【JavaScript學習】JavaScript物件建立JavaScript物件
- 【轉】eval()函式(javascript) - [javaScript]函式JavaScript
- [Javascript] How javascript read the property?JavaScript
- JavaScript -"this"JavaScript
- javascript ??JavaScript
- This in JavaScriptJavaScript
- “This” is For JavaScriptJavaScript
- javascript thisJavaScript
- JavaScriptJavaScript
- javaScript系列[05]-javaScript和JSONJavaScriptJSON
- 44 道 JavaScript 難題(JavaScript Puzzlers!)JavaScript
- 【轉向JavaScript系列】AST in Modern JavaScriptJavaScriptAST
- javascript,還是javascript的問題JavaScript
- JavaScript 教程之JavaScript常用框架簡介JavaScript框架
- 《深入理解JavaScript》——2.3 JavaScript有用嗎JavaScript
- 【JavaScript】--JavaScript總結一覽無餘JavaScript
- 【HTML、JAVASCRIPT、CSS】3、Javascript基本概念HTMLJavaScriptCSS
- [Javascript] Understanding JavaScript Proxies with Symbol.toPrimitiveJavaScriptSymbolMIT
- JavaScript EventJavaScript
- JavaScript BackdoorJavaScript