事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。
事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。
1、冒泡事件:
事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。例如,当设定了多个div的嵌套时;即建立了父子关系,当父div与子div共同加入了onclick事件时,当触发了子div的onclick事件后,子div进行相应的js操作,但是父div的onclick事件同样会被触发。
2、阻止事件冒泡
要阻止特定事件的在DOM层次的传播,可以使用stopPropagation()方法来取消进一步的捕获或者冒泡
$input.onclick = function(e){
this.style.border = "5px solid red"
var e = e || window.e;
alert("red")
e.stopPropagation();
}
3、事件捕获
从顶层元素到目标元素或者从目标元素到顶层元素,和事件冒泡是一个相反的过程。事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。
我们可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。
ele.addEventListener('click',doSomething2,true)
true=捕获
false=冒泡
网友评论