摘要:但是通過添加的匿名函數無法移除,最好是在其他地方定義事件處理程序的函數,然后將該函數的名稱傳給第二個參數。一中的事件對象對象兼容級和級的瀏覽器將對象傳入到事件處理程序中。
一、事件流
假設有如下HTML代碼:
Event Click me
其DOM樹如下圖所示:
如果點擊div元素,因為div是該DOM樹中層次最深的節點,那么哪個節點先接收事件?是由淺到深,還是由深到淺?
DOM事件流事件流描述的是從頁面中接收事件的順序。
存在兩種事件流:事件冒泡(IE)和事件捕獲(Netscape)(這兩種事件流的事件傳播順序如下圖所示)
“DOM2級事件”規定的事件流包括三個階段:
事件捕獲階段:首先發生,為截獲事件提供了機會
處于目標階段:實際的目標接收到事件
事件冒泡階段:在此階段可以對事件做出響應
仍以上面的例子為例,單擊div元素的事件觸發順序如下圖所示:
事件是用戶或瀏覽器自身執行的某種動作(比如click、load、mouseover等)
事件處理程序(事件偵聽器)是響應某個事件的函數。
事件處理程序的名字以“on”開頭,如click事件的事件處理程序是onclick。
為事件指定處理程序的方式有以下幾種:
(一)HTML事件處理程序可以使用HTML為元素指定事件處理程序,方法是:為元素添加一個與事件處理程序同名的屬性,該屬性的值是能夠執行的JS代碼或JS函數。
//直接定義JS代碼 //調用在頁面其他地方定義的JS函數
以上代碼為按鈕添加了鼠標單擊事件(click)的事件處理程序(onclick)。
注:這樣定義的事件處理程序在執行時,有權訪問全局作用域中的任何代碼
(二)DOM0級事件處理程序1、定義事件處理程序IE9、Firefox、Safari、Chrome和Opera支持DOM2級事件處理程序
使用JS代碼來給事件指定事件處理程序,方法是:將一個函數賦值給一個事件處理程序屬性。
每個元素都有自己的事件處理程序屬性,這些屬性的名字與事件處理程序的名字相同,如onclick。
var btn = document.getElementById("myBtn"); //為按鈕指定onclick事件處理程序 btn.onclick = function(){ alert("Clicked"); }
注:
使用DOM0級方法指定的事件處理程序被認為是元素的方法(即事件處理程序是在元素的作用域中運行)
以這種方式添加的事件處理程序會在事件流的冒泡階段被處理
2、刪除事件處理程序將事件處理程序屬性的值設置為null即可刪除事件處理程序:
btn.onclick = null;(三)DOM2級事件處理程序 1、定義事件處理程序
“DOM2級事件”定義了兩個方法來處理事件處理程序:
addEventListener(要處理的事件名,事件處理程序函數,布爾值)
布爾值取值為false:在冒泡階段調用事件處理程序
布爾值取值為true:在捕獲階段調用事件處理程序
removeEventListener(要處理的事件名,事件處理程序函數,布爾值)
var btn = document.getElementById("myBtn"); btn.addEventListener("click", function(){ alert(this.id); }, false);
注:
大多數都是將事件處理程序添加到冒泡階段,從而保證跨瀏覽器的兼容性,故通常都是將最后一個參數設為false
所有的DOM節點都包含上述兩個方法
DOM2級添加的事件處理程序也是在其依附的元素的作用域中運行的
使用DOM2級方法可以為同一個元素添加多個事件處理程序,這些事件處理程序會按照添加它們的順序從上到下執行(DOM0級只能為同一個元素添加一個事件處理程序)
2、刪除事件處理程序通過addEventListener()添加的事件處理程序只能通過removeEventListener()刪除,且刪除時傳入的參數必須與添加時傳入的參數相同。
但是通過addEventListener()添加的匿名函數無法移除,最好是在其他地方定義事件處理程序的函數,然后將該函數的名稱傳給第二個參數。
var btn = document.getElementById("myBtn"); //定義事件處理程序函數 var handler = function(){ alert(this.id); } btn.addEventListener("click", handler, false); btn.removeEventListener("click", handler, false);(四)IE事件處理程序
支持IE事件處理程序的瀏覽器有IE和Opera
IE定義了兩個與DOM2級類似的方法:
attachEvent(事件處理程序名稱,事件處理程序函數):通過方法添加的事件處理程序會被添加到冒泡階段
detachEvent(事件處理程序名稱,事件處理程序函數)
var btn = document.getElementById("myBtn"); btn.attachEvent("onclick", function(){ alert(this.id); });
注:
使用attachEvent()方法時,事件處理程序會在全局作用域中運行(與DOM方法不同)
attachEvent()同樣可以為同一個元素添加多個事件處理程序,但這些事件處理程序是以定義的相反方向執行的
detachEvent()刪除事件處理程序時,需傳入與attachEvent()相同的參數,且無法刪除匿名函數。
(五)跨瀏覽器的事件處理程序為了保證跨瀏覽器的兼容性,我們定義一個EventUtil對象,它包含addHandler()和removeHandler()兩個方法。
var EventUtil = { //addHandler()方法 addHandler:function(element, type, handler){ //DOM2級事件處理程序 if(element.addEventListener){ element.addEventListener(type, handler, false); } //IE事件處理程序 else if(element.attachEvent){ element.attachEvent("on"+type, handler); } //默認使用DOM0級事件處理程序 else{ element["on"+type]=handler; } }, //removeHandler()方法 removeHandler:function(element, type, handler){ if(element.removeEventListener){ element.removeEventListener(type, handler, false); } else if(element.detachEvent){ element.detachEvent("on"+type, handler); } else{ element["on"+type]=handler; } } };三、事件對象
(一)DOM中的事件對象 1、event對象觸發DOM上的某個事件時,會產生一個event事件對象,該對象包含著所有與事件有關的信息。
所有瀏覽器都支持event對象,但支持的方式不同。
兼容DOM(DOM0級和DOM2級)的瀏覽器將event對象傳入到事件處理程序中。
var btn = document.getElementById("myBtn"); btn.onclick = function(event){ alert(event.type); //"click" }; btn.addEventListener("click", function(event){ alert(event.type); //"click" }, false);2、event對象的屬性和方法
event對象的屬性和方法如下圖所示:
在上圖中,currentTarget的值始終等于this,而target只包含事件的實際目標。
如果直接將事件處理程序指定給了目標元素,則this === currentTarget === target
var btn = document.getElementById("myBtn"); btn.onclick = function(event){ alert(event.currentTarget === this); //true alert(event.target === this); //true } //上例中,點擊事件的目標是按鈕,并且把事件處理程序直接給了目標元素,所以三者的值相等
如果將事件處理程序沒有直接指定給目標元素,this === currentTarget !== target
document.body.onclick = function(event){ alert(event.currentTarget === document.body); //true alert(this === document.body); //true alert(target === document.getElementById("myBtn")); //true } //上例中,點擊世界的目標是按鈕,但是事件處理程序制定給了body元素,故三者并不相等。(二)IE中的事件對象 1、訪問event對象
在IE中,指定事件處理程序的方法不同,訪問event對象的方法也不同:
(1)使用DOM0級添加事件處理程序 —— event對象是window對象的一個屬性
var btn = document.getElementById("myBtn"); btn.onclick = function(){ var event = window.event; alert(event.type); //"click" }
(2)使用attachEvent()添加事件處理程序 —— event對象會被傳入事件處理程序函數中
var btn = document.getElementById("myBtn"); btn.attachEvent("onclick", function(event){ alert(event.type); //"click" });
(3)通過HTML特性指定事件處理程序 —— 通過event變量來訪問event對象
2、IE 中event對象的屬性和方法 (三)跨瀏覽器的事件對象雖然DOM和IE中的event對象不同,但基于它們之間的相似性,可以實現跨瀏覽器的兼容性
var EventUntil = { //省略代碼 addHandler: function(element, type, handler){}, //獲取event對象 getEvent: function(event){ return event ? event : window.event; }, //獲取target getTarget: function(event){ return event.target||event.srcElement; }, //取消事件的默認行為 preventDefault: function(event){ if(event.preventDefault){ event.preventDefault(); } else{ event.returnValue = false; } }, //取消冒泡 stopPropagation: function(event){ if(event.stopPropagation){ event.stopPropagation(); } else{ event.cancelBubble = true; } }, //省略代碼 removeHandler:function(element, type, handler){} };
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/91775.html
摘要:項目中我們可通過設置采集率,或對規定時間內數據匯總再上報,減少請求數量,從而緩解服務端壓力。借鑒別人的一個例子只采集上報錯誤參考文檔高級程序設計如何優雅處理前端異常作者以樂之名本文原創,有不當的地方歡迎指出。 showImg(https://segmentfault.com/img/bVbnuud?w=640&h=640); 錯誤類型 即時運行錯誤 (代碼錯誤) 資源加載錯誤 常見...
摘要:解耦優勢代碼復用,單元測試。常用比較誤區可同時判斷,可用來判斷對象屬性是否存在。使用作判斷無法進行充分的類型檢查。文件中應用常量參考文檔高級程序設計作者以樂之名本文原創,有不當的地方歡迎指出。 showImg(https://segmentfault.com/img/bVburXw?w=500&h=400); 編寫可維護性代碼 可維護的代碼遵循原則: 可理解性 (方便他人理解) 直觀...
摘要:事件流事件流是指從頁面接受事件的順序一般考慮兼容性問題會使用冒泡而不適用捕獲事件冒泡事件開始時由具體的元素嵌套層次最深的元素接受然后逐級向上傳播到文檔事件捕獲基本跟事件冒泡相反事件捕獲用于在于事件到達預定目標之前捕獲他首先接收到事件然后事件 事件流 事件流是指從頁面接受事件的順序showImg(https://segmentfault.com/img/bVIf9T?w=540&h=48...
摘要:高級程序設計摘錄可選。表示通過屬性指定的代碼的字符集。這個屬性并不是必需的,如果沒有指定這個屬性,則其默認值仍為。規范要求腳本按照它們出現的先后順序執行,因此第一個延遲腳本會先于第二個延遲腳本執行,而這兩個腳本會先于事件執行。 《javascript高級程序設計》摘錄: async:可選。表示應該立即下載腳本,但不應妨礙頁面中的其他操作,比如下載其他資源或 等待加載其他腳本。只對外部...
摘要:而事件分為個級別級事件處理程序,級事件處理程序和級事件處理程序。級中沒有規范事件的相關內容,所以沒有級事件處理。 showImg(https://segmentfault.com/img/bVburYR?w=499&h=400); HTML依托于JavaScript來實現用戶與WEB網頁之間的動態交互,接收用戶操作并做出相應的反饋,而事件在此間則充當橋梁的重要角色。 日常開發中,經常會...
閱讀 2579·2021-11-23 09:51
閱讀 3127·2019-08-30 15:54
閱讀 1081·2019-08-30 14:14
閱讀 3552·2019-08-30 13:59
閱讀 1414·2019-08-29 17:09
閱讀 1473·2019-08-29 16:24
閱讀 2857·2019-08-29 15:43
閱讀 918·2019-08-29 12:45