事件流
DOM事件流:
点击按钮,其实最先触发的是window被点击,层层传递下去,捕获阶段结束后再到目标阶段最后是冒泡阶段(目标阶段属于冒泡阶段一部分)。
对于DOM0级的事件流来说,可以看成是冒泡阶段。DOM2级可以指定是捕获还是冒泡阶段。
DOM2方式可以为同个元素添加多个事件处理程序,如果希望只执行一个,其他的不要执行可添event.stopImmediatePropagation()到可执行的事件中去,该方法还会的阻止捕获或冒泡(这点同stopPropagation()同)。
<div id="first">
<div id="second">
<button id="button">冒泡</button>
</div>
</div>
<script>
var button = document.getElementById("button");
var second = document.getElementById("second");
var first = document.getElementById("first");
var body = document.body;
var html = document.documentElement;
// 冒泡阶段(button——>window)
button.addEventListener("click", function () {
console.log("button");
}, false);
second.addEventListener("click", function () {
console.log("second");
}, false);
first.addEventListener("click", function () {
console.log("first");
}, false);
body.addEventListener("click", function() {
console.log("body");
}, false);
html.addEventListener("click", function () {
console.log("html");
}, false);
window.addEventListener("click", function () {
console.log("window");
}, false);
// 捕获阶段(window——>button)
button.addEventListener("click", function () {
console.log("button");
console.log("------冒泡开始------");
}, true);
second.addEventListener("click", function () {
console.log("second");
}, true);
first.addEventListener("click", function () {
console.log("first");
}, true);
body.addEventListener("click", function() {
console.log("body");
}, true);
html.addEventListener("click", function () {
console.log("html");
}, true);
window.addEventListener("click", function () {
console.log("window");
}, true);
// window
// html
// body
// first
// second
// button
// ------冒泡开始------
// button
// second
// first
// body
// html
// window
</script>