事件的冒泡
- 所谓的冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同时间也会被触发,
- 在开发中大部分情况冒泡都是有用的,如果不希望发生时间冒泡可以通过事件对象来取消冒泡
<body>
<div id="div" style="width: 100px; height: 100px; background-color: black;">
<span id="span" style="background-color: yellow;">span</span>
</div>
</body>
<script>
let div = document.getElementById("div");
let span = document.getElementById("span");
span.onclick = function(event){
//取消冒泡
// 可以将事件对象的cancelBubble设置为true,即可取消冒泡
// 不同的浏览器编译时event属性所属不同,有的以响应事件函数形参,有的在window对象中,下面的代码用来解决浏览器的兼容问题
alert("我是一个span");
event = event || window.event;
event.cancelBubble = true;
}
div.onclick = function(){
alert("我是一个div");
}
</script>
事件的委派
- 指将事件统一绑定给元素的共同的祖先元素,这样后代元素上的事件被触发时,会一直冒泡到祖先元素, 从而通过祖先的响应函数来处理事件。
- 事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能。
举个例子:点击链接时触发弹出框事件,点击按钮能新创建链接,点击新建的链接依然能触发弹出框事件,点击ul其他部分则不触发
<body>
<button id="btn01">添加超链接</button>
<ul id="ul" style="background-color: #bfa;">
<li><a href="javascript:;" class="link">超链接一</a></li>
<li><a href="javascript:;" class="link">超链接二</a></li>
<li><a href="javascript:;" class="link">超链接三</a></li>
</ul>
</body>
<script>
let btn01 = document.getElementById("btn01");
let ul = document.getElementById("ul");
btn01.onclick = function(event){
let ul = document.getElementById("ul");
let li = document.createElement("li");
li.innerHTML = "<a href='javascript:;' class='link'>新增的超链接</a>";
ul.appendChild(li);
}
ul.onclick = function(event){
event = event || window.event;
// target
// event中的target表示的触发事件的对象
console.log(event.target);
// 如果触发事件的对象是我们期望的元素,则执行,否则不执行
if(event.target.className == "link"){ // 如果class = "link box",则无效,可用正则表达式处理
alert(event.target);
}
}
</script>