学到了 学到了
看了这篇后博客后，对事件冒泡和事件委托有了清晰的理解 https://blog.csdn.net/weixin_48769418/article/details/115045810
一、事件冒泡
- 指的是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发
- 如果不希望发生事件冒泡可以通过事件对象属性来取消冒泡
举例：
效果图：
其中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=""> <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>
三、总结
事件冒泡是事件委托及事件传播的基础
