摘要:可以使用偵聽(tīng)器或處理程序來(lái)預(yù)訂事件,以便事件發(fā)生時(shí)執(zhí)行相應(yīng)的代碼。響應(yīng)某個(gè)事件的函數(shù)稱為事件處理程序或事件偵聽(tīng)器。可以刪除通過(guò)級(jí)方法指定的事件處理程序。
JavaScript和HTML之間的交互是通過(guò)事件實(shí)現(xiàn)的。
事件:文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間。
可以使用偵聽(tīng)器(或處理程序來(lái)預(yù)訂事件),以便事件發(fā)生時(shí)執(zhí)行相應(yīng)的代碼。
1. 事件流事件流:從頁(yè)面中接收事件的順序。
IE和Netscape開發(fā)團(tuán)隊(duì)提出了差不多是完全相反的事件流的概念。
IE: 事件冒泡流
Netscape: 事件捕獲流
1.1 事件冒泡事件冒泡(event bubbling):事件開始時(shí)由最具體的元素(文檔中嵌套層次最深的那個(gè)節(jié)點(diǎn))接收,然后逐級(jí)向上傳播到較為不具體的節(jié)點(diǎn)(文檔)。
1.2 事件捕獲事件捕獲(event capturing):不太具體的節(jié)點(diǎn)應(yīng)該更早接收到事件,最具體的節(jié)點(diǎn)應(yīng)該最后接收到事件。
事件捕獲的用意在于在事件到達(dá)預(yù)定目標(biāo)之前捕獲它。
1.3 DOM事件流“DOM2級(jí)事件”規(guī)定的事件流包括三個(gè)階段:
1. 事件捕獲階段 2. 處于目標(biāo)階段 3. 事件冒泡階段2. 事件處理程序
事件是用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作。如:click,load,mouseover。
響應(yīng)某個(gè)事件的函數(shù)稱為事件處理程序(或事件偵聽(tīng)器)。
某個(gè)元素支持的每種事件,都可以使用一個(gè)與相應(yīng)事件處理程序同名的HTML特性來(lái)指定。
單擊按鈕,顯示警告框。通過(guò)指定 onclick 特性并將一些JavaScript代碼作為它的值來(lái)定義。
在HTML中定義的事件處理程序可以包含要執(zhí)行的具體動(dòng)作,也可以調(diào)用在頁(yè)面其他地方定義的腳本。
事件處理程序中的代碼在執(zhí)行時(shí),有權(quán)訪問(wèn)全局作用域中的任何代碼。
缺點(diǎn):
存在時(shí)差問(wèn)題。用戶在事件處理程序被解析之前就觸發(fā)了事件。
擴(kuò)展事件處理程序的作用域鏈在不同的瀏覽器中會(huì)導(dǎo)致不同結(jié)果。
HTML和JavaScript代碼緊密耦合。
2.2 DOM0 級(jí)事件處理程序通過(guò)JavaScript指定事件處理程序的傳統(tǒng)方式,就是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩浴?/p>
這種方法被稱為事件處理程序賦值,出現(xiàn)在第四代 Web 瀏覽器中。
每個(gè)元素(包括 window 和 document)都有自己的事件處理程序?qū)傩裕瑢傩酝ǔH啃懀?onclick。將這種屬性的值設(shè)置為一個(gè)函數(shù),就可以指定事件處理程序。
可以刪除通過(guò) DOM0 級(jí)方法指定的事件處理程序。
btn.onclick = null; // 刪除事件處理程序2.3 DOM2 級(jí)事件處理程序
“DOM2級(jí)事件”定義了兩個(gè)方法,用于處理指定和刪除事件處理程序的操作:
addEventListener()
removeEventListener()
所有 DOM 節(jié)點(diǎn)都包含這兩個(gè)方法,它們接受3個(gè)參數(shù):
要處理的事件名
作為事件處理程序的函數(shù)
一個(gè)布爾值:
true: 捕獲階段調(diào)用事件處理程序
false: 冒泡階段調(diào)用
為一個(gè)按鈕添加 onclick 事件處理程序:
var btn = document.getElementById("myBtn"); btn.addEventListener("click", function() { alert(this.id); }, false);
使用 DOM2級(jí)方法添加事件處理程序的主要好處是可以添加多個(gè)事件處理程序。
用 addEventListener() 添加的事件處理程序只能使用 removeEventListener() 來(lái)移除,移除時(shí)傳入的參數(shù)與添加時(shí)的參數(shù)相同。所以,用 addEventListener() 添加的匿名函數(shù)將無(wú)法移除。
大多數(shù)情況下,都是將事件處理程序添加到事件流的冒泡階段,這樣可以最大限度地兼容各種瀏覽器。
2.4 IE 事件處理程序IE 實(shí)現(xiàn)了與 DOM 中類似的兩個(gè)方法:
attachEvent()
detachEvent()
接受兩個(gè)參數(shù):事件處理程序名稱、事件處理程序函數(shù)
通過(guò)這種方法添加的事件處理程序會(huì)被添加到冒泡階段。
var btn = document.getElementById("myBtn"); btn.attachEvent("onclick", function() { alert("clicked"); });
注意: attachEvent() 的第一個(gè)參數(shù)是“onclick”,而不是 addEventListener()方法中的“click"。
在IE中使用 attachEvent() 與使用 DOM0 級(jí)方法的主要區(qū)別在于事件處理程序的作用域。
DOM0 級(jí)方法:事件處理程序會(huì)在其所屬元素的作用域內(nèi)運(yùn)行
attachEvent()方法:事件處理程序會(huì)在全局作用域內(nèi)運(yùn)行,this 等于 window。
2.5 跨瀏覽器的事件處理程序創(chuàng)建一個(gè)方法 addHandler(),它屬于名叫EventUtil的對(duì)象視情況分別使用 DOM0級(jí)方法、 DOM2級(jí)方法或IE方法來(lái)添加事件。
addHandler()方法接收3個(gè)參數(shù):
要操作的元素
事件名稱
事件處理程序函數(shù)
與其對(duì)應(yīng)的方法是 removeHandler(),接收相同的參數(shù)。
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.detachEvent) { element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } } }
這兩個(gè)方法首先都會(huì)檢測(cè)傳入的元素中是否存在DOM2級(jí)方法。如果存在DOM2級(jí)方法,則使用該方法。如果存在的是IE的方法,則采取第二種方案。
像下面這樣使用EventUtil對(duì)象:
var btn = document.getElementById("myBtn"); var handler = function() { alert("Clicked"); } EventUtil.addHandler(btn, "click", handler); EventUtil.removerHandler(btn, "click", handler);
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/78450.html
摘要:指定事件處理程序指定事件處理程序主要有兩種方式級(jí)事件處理程序級(jí)事件處理程序。添加事件處理程序注意這里是哦或移除事件處理程序使用移除事件處理程序的條件與方法相同必須提供相同的參數(shù),從而添加的匿名函數(shù)也無(wú)法被移除。 今天看書又看到事件,遂決定小總結(jié)一下~ JavaScript與HTML之間的交互是通過(guò)事件實(shí)現(xiàn)的。事件,就是文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間。可以使用監(jiān)聽(tīng)器(事件處...
摘要:指定事件處理程序指定事件處理程序主要有兩種方式級(jí)事件處理程序級(jí)事件處理程序。添加事件處理程序注意這里是哦或移除事件處理程序使用移除事件處理程序的條件與方法相同必須提供相同的參數(shù),從而添加的匿名函數(shù)也無(wú)法被移除。 今天看書又看到事件,遂決定小總結(jié)一下~ JavaScript與HTML之間的交互是通過(guò)事件實(shí)現(xiàn)的。事件,就是文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間。可以使用監(jiān)聽(tīng)器(事件處...
摘要:事件流級(jí)事件規(guī)定的事件流包括三個(gè)階段事件捕獲階段處于目標(biāo)階段和事件冒泡階段。事件處理程序的名字以開頭,如等。如使用級(jí)方法指定的事件處理程序被認(rèn)為是元素的方法。 事件流 事件流描述的是從頁(yè)面中接收事件的順序。IE的事件流是事件冒泡流,而Netscape Communicator的事件流是事件捕獲流。 事件冒泡 即事件開始時(shí)由最具體的元素接收,然后逐級(jí)向上傳播到較為不具體的節(jié)點(diǎn)。如: ...
摘要:事件流描述的是從頁(yè)面中接受事件的順序。事件流中的事件流是事件冒泡流。順序是從外向里級(jí)事件規(guī)定的事件流包括三個(gè)階段事件捕獲階段處于目標(biāo)階段和事件冒泡階段,其中到是處于目標(biāo)階段,如圖所示。添加的事件會(huì)被逆序執(zhí)行。 HTML和js之間的交互是通過(guò)事件實(shí)現(xiàn)的。 事件流描述的是從頁(yè)面中接受事件的順序。 事件流 IE中的事件流是事件冒泡流。順序是從里向外 eg:div-body-html-...
閱讀 2254·2021-11-22 14:56
閱讀 10035·2021-09-08 10:45
閱讀 1978·2019-08-30 13:54
閱讀 2867·2019-08-29 16:54
閱讀 2009·2019-08-29 14:20
閱讀 1778·2019-08-29 12:25
閱讀 1856·2019-08-29 12:17
閱讀 1054·2019-08-23 18:29