摘要:事件流描述的是從頁面中接受事件的順序。事件流中的事件流是事件冒泡流。順序是從外向里級事件規定的事件流包括三個階段事件捕獲階段處于目標階段和事件冒泡階段,其中到是處于目標階段,如圖所示。添加的事件會被逆序執行。
HTML和js之間的交互是通過事件實現的。
事件流描述的是從頁面中接受事件的順序。
事件流IE中的事件流是事件冒泡流。順序是從里向外 eg:div-body-html-Document
Netscape Communicator的事件流是事件捕獲流。順序是從外向里 eg:Document-html-body-div
DOM2級事件規定的事件流包括三個階段:事件捕獲階段、處于目標階段和事件冒泡階段,其中3到4是處于目標階段,如圖1所示。
事件處理程序1.HTML事件處理程序
通過html特性來指定處理事件
function show(){ alert("hello world") }
事件處理程序中的代碼在執行時,有權訪問全局作用域中的任何代碼
為什么會這樣呢???
通過html特性方式指定的事件處理程序會創建一個封裝這元素屬性值的函數,這個函數內部可以像訪問局部變量一樣訪問document及鈣元素本身的成員,神不神奇?這個函數使用with擴展自己的作用域:
function(){ with(document){ with(this){ //元素屬性值 } } }
2.DOM0級事件處理程序
通過javaScript指定事件處理程序的傳統方式,將一個函數賦值給一個事件處理程序屬性
var btn=document.getElementById("myBtn") btn.onclick=function(){ alert(this.id) }
刪除:
btn.onclick=null;
3.DOM2級事件處理程序
兩個方法,一個處理指定事件一個刪除,addEventListener()和removeEventListener()。這兩個方法分別接受三個參數:
(要處理的事件名、作為事件處理程序的函數、一個布爾值)true表示在捕獲階段調用函數,false表示在冒泡階段調用,一般使用false,這樣可以最大限度地兼容各種瀏覽器
通過addEventListener()添加的函數只能通過addEventListener()移除,所以,匿名函數無法移除
var btn=document.getElementById("myBtn") btn.addEventListener("click",function(){ alert(this.id) },false) btn.removeEventListener("click",function(){ //沒有用 alert(this.id) },false)
調用removeEventListener時與傳入addEventListener時的函數不同
var btn=document.getElementById("myBtn") var handler(){ alert(this.id) } btn.addEventListener("click",handler,false) btn.removeEventListener("click",handler,false)
4.IE事件處理程序
與DOM中類似,兩個方法:attachEvent()和detachEvent(),接受兩個參數,同時由于IE8及更早版本只支持事件冒泡,所以通過這兩個方法添加的事件處理程序都會被添加到冒泡階段:
(事件處理程序名稱、事件處理程序函數)
var btn=document.getElementById("myBtn") btn.attachEvent("onclick",function(){ alert(this===window) //true })
此處是onclick而不是click,與DOM方法不同的是這里的事件處理程序會在全局作用域中運行,this等于window。添加的事件會被逆序執行。
5.跨瀏覽器的事件處理程序
使用EventUtil對象,封裝如下:
var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { //DOM2級 element.addEventListener(type, handler, false); } else if (element.attachEvent) { // IE element.attachEvent("on" + type, handler); } else { //DOM0級 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; } }, }
使用如下:
var btn=document.getElementById("myBtn") var handler=function(){ alert(clicked) } EventUtil.addHandler(btn,"click",handler) EventUtil.removeHandler(btn,"click",handler)
注:本篇文章內容來自紅皮書
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/93943.html
摘要:事件流級事件規定的事件流包括三個階段事件捕獲階段處于目標階段和事件冒泡階段。事件處理程序的名字以開頭,如等。如使用級方法指定的事件處理程序被認為是元素的方法。 事件流 事件流描述的是從頁面中接收事件的順序。IE的事件流是事件冒泡流,而Netscape Communicator的事件流是事件捕獲流。 事件冒泡 即事件開始時由最具體的元素接收,然后逐級向上傳播到較為不具體的節點。如: ...
摘要:可以使用偵聽器或處理程序來預訂事件,以便事件發生時執行相應的代碼。響應某個事件的函數稱為事件處理程序或事件偵聽器。可以刪除通過級方法指定的事件處理程序。 JavaScript和HTML之間的交互是通過事件實現的。 事件:文檔或瀏覽器窗口中發生的一些特定的交互瞬間。 可以使用偵聽器(或處理程序來預訂事件),以便事件發生時執行相應的代碼。 1. 事件流 事件流:從頁面中接收事件的順序。 ...
摘要:處于目標階段事件在上發生并處理。冒泡階段事件又傳播回文檔。不支持捕獲事件的。總結二使用事件委托新添加的元素還會有之前的事件。事件對象在觸發某個事件時,會產生一個事件對象。 js 是采用異步事件驅動的機制來響應用戶操作的,也就是說當用戶對某個html元素進行操作的時候,會產生一個事件,該事件會驅動某些函數來處理。事件源:產生事件的地方(html元素,窗口,其他等等);事件:鼠標事件,鍵盤...
閱讀 3565·2021-09-24 09:48
閱讀 1087·2021-09-10 10:51
閱讀 3268·2019-08-30 13:03
閱讀 3315·2019-08-30 12:51
閱讀 1387·2019-08-30 11:22
閱讀 1051·2019-08-29 18:38
閱讀 2035·2019-08-29 16:41
閱讀 3182·2019-08-29 15:32