文章目录
一、事件冒泡
- 指的是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发
- 如果不希望发生事件冒泡可以通过事件对象属性来取消冒泡
举例：
效果图：
其中body是爷爷，绿色div(我是box1)是爸爸，黄色span(我是span)是儿子，给这三代都绑上单击响应函数
实现代码
body代码
<body>
<div id="box1">
我是box1
<span id="s1">我是span</span>
</div>
</body>
CSS代码
<style type="text/css">
#box1{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
#s1{
background-color: yellow;
}
</style>
JS代码
<script type="text/javascript">
window.onload = function(){
//为s1绑定一个单击响应函数
var s1 = document.getElementById("s1");
s1.onclick=function(){
alert("我是span单击响应函数");
}
//为box1绑定一个单击响应函数
var box1 = document.getElementById("box1");
box1.onclick=function(){
alert("我是box1单击响应函数");
}
//body绑定一个单击响应函数
document.body.onclick = function(){
alert("我是body单击响应函数")
}
}
</script>
触发效果如下：
当点击儿子(span)时，他，他爸爸(div)及他爷爷(body)都会触发各自的响应函数，它爸爸同理
实现终止冒泡
- 通过事件对象cancelBubble属性来取消冒泡
- event.cancelBubble = true;
- 如终止儿子(span)冒泡，即它爸爸及它爷爷都不触发单击事件
完整代码
s1.onclick=function(event){
//解决浏览器兼容问题
event=event || window.event;
alert("我是span单击响应函数");
//取消冒泡
event.cancelBubble = true;
}
二、事件委派(委托)
是什么
- 指将事件统一绑定给元素的共同的祖先元素
- 当后代上的事件触发时,会一直冒泡到祖先元素
- 通过祖先元素的响应函数来处理事件
下面举例子说明
效果图：
实现动态添加超链接并绑定事件
实现代码
body代码
<body>
<button id="btn01">添加超链接</button>
<ul id="u1" style="background-color: yellow;">
<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>
JS代码
<script type="text/javascript">
window.onload = function(){
var u1= document.getElementById("u1");
//点击按钮以后添加超链接
var btn01 = document.getElementById("btn01");
btn01.onclick=function(){
//创建一个li
var li = document.createElement("li");
li.innerHTML="<a href='javascript:;' class='link'>新建超链接</a>";
//将li添加到ul中
u1.appendChild(li);
}
u1.onclick = function(event){
//解决浏览器兼容问题
event = event || window.event;
/**
* target
* -事件对象的target属性表示触发事件的对象
* -ul中包括li、文本及超链接，只有点击超链接触发事件
*/
if(event.target.className == "link"){
alert("我是ul单击响应函数");
}
}
}
</script>
三、总结
事件冒泡是事件委托及事件传播的基础，得好好理解
