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