詳細解析js原生事件描述（附上代碼，簡單明了）

來源：懂視網責編：小采時間：2020-11-27 19:48:54

詳細解析js原生事件描述（附上代碼，簡單明了）

詳細解析js原生事件描述（附上代碼，簡單明了）:下面是我給大家整理的js原生事件，有興趣的同學可以去看看。1、事件流事件流主要分為事件冒泡和事件捕獲兩種。事件冒泡，目標元素最先接收事件，然后逐漸向上層傳播到較為不具體的節點。事件捕獲完全相反，它的主要思想是較不具體的節點最先接收到事件，然后

推薦度：

點擊下載本文 文檔為doc格式

導讀詳細解析js原生事件描述（附上代碼，簡單明了）:下面是我給大家整理的js原生事件，有興趣的同學可以去看看。1、事件流事件流主要分為事件冒泡和事件捕獲兩種。事件冒泡，目標元素最先接收事件，然后逐漸向上層傳播到較為不具體的節點。事件捕獲完全相反，它的主要思想是較不具體的節點最先接收到事件，然后

下面是我給大家整理的js原生事件，有興趣的同學可以去看看。

1、事件流
事件流主要分為事件冒泡和事件捕獲兩種。事件冒泡，目標元素最先接收事件，然后逐漸向上層傳播到較為不具體的節點。事件捕獲完全相反，它的主要思想是較不具體的節點最先接收到事件，然后逐漸向下層傳播到目標節點。

<html>
 <head>
 <title>事件流</title>
 </head>
 <body>
 <div id ="testDiv"></div>
 </body>
 </html>

當點擊div時,冒泡事件接收到節點順序div->body->html->document
捕獲事件接收到節點順序document->html->body->div

2、事件處理程序
a)HTML事件處理程序
某個元素支持的每種事件,都可以使用一個與相應事件處理程序同名的HTML特性來指定。
缺點：1、時差問題，可能在瀏覽器還未解析點擊事件函數時,用戶已經點擊了頁面元素——通過try-catch包裹錯誤
2、事件處理程序的作用域鏈在不同瀏覽器中會導致不同結果。
3、HTML代碼和Javascript代碼緊密耦合,不利于擴展維護。
b) DOM0級事件處理程序
將函數賦值給元素事件處理程序屬性
var btn = document.getElementById(“#dv”);
btn.onclick = function(){};
想要刪除元素的事件處理程序–btn.onclicn = null;

該方式添加的事件處理程序在事件冒泡階段被處理。

c)DOM2級事件處理程序
指定事件處理程序addEventListener
刪除事件處理程序removeEventListener
接收三個參數即要處理的事件名，事件處理程序的函數，布爾值（true表示捕獲階段調用處理程序，false表示冒泡階段調用事件處理程序）

注意:addEventListener必須通過removeEventListener刪除且參數必須一致，所以通過addEventListener添加的匿名函數不能被移除。

d)IE事件處理程序

attachEvent
detachEvent
兩個方法接收相同的兩個參數（”onclick”,”function(){}”）;
由于IE8級更早版本只支持事件冒泡,所以通過attachEvent添加的事件處理程序只能被添加到冒泡階段。
注意：attach中第一個參數是onclick而不是addEventListener中的click
IE事件處理程序attachEvent添加的在全局作用域中運行

var btn = document.getElementById(“#tes”); 
btn.attachEvent(“onclick”,function(){ 
alert(this == window); //true 
})

3、跨瀏覽器的事件處理程序。
由于不同瀏覽器之間事件處理程序不同，所以有必要編寫可以跨瀏覽器使用的事件處理程序。

var eventUtil = {
 addHandler: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;
 }
 },
 removeHandler:function(element,type,handler){
 if(element.removeEventListener){
 element.removeEventListener(type,handler,false);
 }else if(element.deatchEvent){
 element.deatch("on" + type,handler);
 }else{
 element["on" + type] = null;
 }
 }
}

上面是我整理給大家的，希望今后會對大家有幫助。

JS彈出窗口代碼大全

幾個前端常見的JS排序代碼

JS去掉字符串前后空格或去掉所有空格的用法

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com