js 之事件捕获和冒泡实践

如上demo，经过运行之后发现输出为:

由此可以看出,先捕获，后冒泡，捕获从上到下(从窗口window一直到指定的元素,)，冒泡从下到上(从指定元素一直往上到当前window),

 

var wrapDiv = document.getElementById("wrapDiv");

var innerP = document.getElementById("innerP");

var textSpan = document.getElementById("textSpan"); // 测试直接绑定的事件到底发生在哪个阶段

wrapDiv.onclick = function(){ console.log("wrapDiv onclick 测试直接绑定的事件到底发生在哪个阶段") }; // 捕获阶段绑定事件 window.addEventListener("click", function(e){ console.log("window 捕获", e.target.nodeName, e.currentTarget.nodeName); }, true);

document.addEventListener("click", function(e){ console.log("document 捕获", e.target.nodeName, e.currentTarget.nodeName); }, true); document.documentElement.addEventListener("click", function(e){ console.log("documentElement 捕获", e.target.nodeName, e.currentTarget.nodeName); }, true); document.body.addEventListener("click", function(e){ console.log("body 捕获", e.target.nodeName, e.currentTarget.nodeName); }, true); wrapDiv.addEventListener("click", function(e){ console.log("wrapDiv 捕获", e.target.nodeName, e.currentTarget.nodeName); }, true); innerP.addEventListener("click", function(e){ console.log("innerP 捕获", e.target.nodeName, e.currentTarget.nodeName); }, true); textSpan.addEventListener("click", function(){ console.log("textSpan 冒泡 在捕获之前绑定的") }, false); textSpan.onclick = function(){ console.log("textSpan onclick") }; textSpan.addEventListener("click", function(e){ console.log("textSpan 捕获", e.target.nodeName, e.currentTarget.nodeName); }, true); // 冒泡阶段绑定的事件 window.addEventListener("click", function(e){ console.log("window 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false); document.addEventListener("click", function(e){ console.log("document 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false); document.documentElement.addEventListener("click", function(e){ console.log("documentElement 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false); document.body.addEventListener("click", function(e){ console.log("body 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false); wrapDiv.addEventListener("click", function(e){ console.log("wrapDiv 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false); innerP.addEventListener("click", function(e){ console.log("innerP 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false); textSpan.addEventListener("click", function(e){ console.log("textSpan 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false);

由此可知onclick事件发生在冒泡阶段。

如果对一个没有子元素的元素同时绑定冒泡和捕获，结果执行事件是遵循Javascript的执行顺序。如果有子元素，则是先执行捕获，然后再执行冒泡。