事件冒泡: | |
当有多个元素嵌套时,当这些元素都绑定的是同样一种类型的事件时, | |
如果点击内部的元素,会产生冒泡行为,连带着触发外部元素的事件 | |
事件冒泡真实过程: | |
1.事件捕获阶段: | |
最先知道事件发生的是浏览器窗口window | |
会一层一层的向内去传递 | |
window -> document -> html -> body -> ul -> li | |
2.目标阶段: | |
终于找到了目标li,让li准确触发了这个事件 | |
3.事件冒泡阶段: | |
从目标li一层一层向外去传递,去冒泡 | |
li -> ul -> body -> html -> document -> window | |
沿路碰到相同的事件都会被触发 | |
阻止事件冒泡: | |
想要阻止谁,就在谁的事件响应函数中写上e.stoppropagation(); | |
事件委托: | |
利用冒泡机制,把子级的事件委托给父级元素 |
var liobjs = document.getElementsByTagName("li");
for(var i=0;i<liobjs.length;i++){
liobjs[i].onclick = function(e){
console.log("你点击的是li哦~");
e.stopPropagation();
}
}
var uobj = document.getElementById("uu");
uobj.onclick = function(){
console.log("你点击的是ul哦~");
}