ES5 03 事件監聽 委託 捕獲與冒泡

document.addeventlistener(「click」, function(e){},true);

第三個引數有兩個值（true：捕獲 false：冒泡），預設為false；

捕獲：從外向內逐級觸發；

冒泡：從內向外逐級觸發；

阻止事件冒泡：e.stoppropagation();

lang
="en"
>
>
charset
="utf-8"
>
>
documenttitle
>
type
="text/css"
>
#wrapdiv, #innerp, #textspan
#wrapdiv
#innerp
#textspan
style
>
head
>
>
"wrapdiv"
>
wrapdiv
"innerp"
>
innerp
"textspan"
>
textspanspan
>
p>
div>
>
var wrapdiv = document.
getelementbyid
("wrapdiv");
var innerp = document.
getelementbyid
("innerp");
var textspan = document.
getelementbyid
("textspan");
//繫結監聽事件
// function addeventhandler(target,type,fn,kind)else
// }
// addeventhandler(window,'click',function(e), true)
// 捕獲階段繫結事件
//window > document >  document.documentelement > document.body> 
//  wrapdiv>  innerp > textspan
// window.addeventlistener("click", function(e), true);
// document.addeventlistener("click", function(e), true);
// document.documentelement.addeventlistener("click", function(e), true);
// document.body.addeventlistener("click", function(e), true);
// wrapdiv.addeventlistener("click", function(e), true);
// innerp.addeventlistener("click", function(e), true);
// textspan.addeventlistener("click", function(e), true);
// 冒泡階段繫結的事件
window.
addeventlistener
("click"
,function
(e),
false);
document.
addeventlistener
("click"
,function
(e),
false);
document.documentelement.
addeventlistener
("click"
,function
(e),
false);
document.body.
addeventlistener
("click"
,function
(e),
false);
wrapdiv.
addeventlistener
("click"
,function
(e),
false);
innerp.
addeventlistener
("click"
,function
(e),
false);
textspan.
addeventlistener
("click"
,function
(e),
false);
script
>
body
>
html
>

var dom = document.

getelementbyid
("#dom");
varfun1
=function()
//事件監聽
dom.
addeventlistener
("click"
,fun1)
;//事件移除
dom.
removeeventlistener
("click"
,fun1)
;//ie6~ie8
dom.
attchevent
("onclick"
,fun1)
;

事件冒泡與捕獲 事件委託

設想這樣一種情況 乙個div裡面有個span元素 當滑鼠單擊span時，這個事件算是誰的？div還是span？準確的說兩個都觸發了，這種認可大家都同意，事實就是這樣的，第二個問題來了，這個事件應該有個先後順序 先觸發span還是div？早期就有兩個主流的瀏覽器廠商各執己見，ie認為，這個事件首先觸發...

事件冒泡 事件捕獲和事件委託

事件冒泡會從當前觸發的事件目標一級一級往上傳遞，依次觸發，直到document為止。事件捕獲會從document開始觸發，一級一級往下傳遞，依次觸發，直到真正事件目標為止。事件委託依靠的就是事件冒泡和事件捕獲的機制。box1 box2 box3 上面是三個具有父子關係的box，分別繫結了列印事件，現...

JS事件冒泡 事件捕獲和事件委託

如上圖所示 事件冒泡 結構上從內到外 如上圖所示 事件捕獲 結構上從外到內 使用addeventlistener 方法指定事件是否在捕獲或冒泡階段執行 element.addeventlistener event,function,usecapture usecapture 可選。布林值，指定事件是...