4.事件冒泡及事件阻止

事件的冒泡

  • 相同事件从子元素父亲元素一代代向上传,直到document
html
 <div class="out" id="out">
   	<div class="in1" id="in1">我是第一个</div>
    <div class="in2" id="in2">第二个是我</div>
 </div>
css
 .out {
   width: 200px;
    height: 200px;
    background-color: pink;
}

.out .in1 {
    width: 100px;
    background-color: yellow;
}

.out .in2 {
    width: 100px;
    background-color: greenyellow;
    margin-top: 20px;
}
JavaScript
window.onload = function (ev) {
var out = document.getElementById("out");
 var in1 = document.getElementById("in1");
 var in2 = document.getElementById("in2");

 in1.onclick = function (ev1) {            
     console.log(this.innerHTML);
 }
 in2.onclick = function (ev1) {            
     console.log(this.innerHTML);
 }
 out.onclick = function (ev1) {            
     console.log(this.innerHTML);
 }
 document.onclick = function (ev1) {            
     console.log("最外层 document");
 }
}
结果

在这里插入图片描述

  • 点击我是第一个时:
    在这里插入图片描述
    先是黄色框,然后是粉色,最后是document。

  • 点击粉红色框框时
    在这里插入图片描述
    显示粉色框,然后是document。

  • 点击浏览器空白部分时
    在这里插入图片描述

从儿子到祖辈向外传。

阻止事件:

  1. cancelBubble(HTML DOM Event 对象属性) :如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。(这个没用不,不明白)

  2. stopPropagation(HTML DOM Event 对象方法):终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。

  3. preventDefault(HTML DOM Event 对象方法)通知浏览器不要执行与事件关联的默认动作。(调用:e.preventDefault();)

如果阻止这样的事件冒泡,使用 e.stopPropagation(). (谷歌浏览器)
添加return false,不能接阻止事件的传递 :

JavaScript
 window.onload = function (ev) {
 var out = document.getElementById("out");
 var in1 = document.getElementById("in1");
 var in2 = document.getElementById("in2");

 in1.onclick = function (ev1) {            
     console.log(this.innerHTML);            
     ev1.stopPropagation();
 }
 in2.onclick = function (ev1) {            
     console.log(this.innerHTML);
     return false;				//测试return false 
 }
 out.onclick = function (ev1) {            
     console.log(this.innerHTML);
     ev1.stopPropagation();
 }
 document.onclick = function (ev1) {            
     console.log("最外层 document");
 }
}

点击结果:

点击我是第一个时(黄色框框)
在这里插入图片描述
事件被阻止了。


点击我是第二个(绿色框框)
在这里插入图片描述
该标签未设置阻止事件(添加了return false语句,没有效果),但父亲组件设置了阻止事件,所以传递到父亲就停止了


点击粉色大框框
在这里插入图片描述
事件被阻止了。


点击浏览器空白处
在这里插入图片描述


事件的委托

通过父亲元素绑定事件,再运用事件冒泡,来找到目标元素

优点:不需要绑定多个事件,减少代码量,同时不需要重复绑定事件

html
 <button id="add">添加一个链接</button>
 <ul id="box">
   	<li>灰原</li>
    <li><a href="#" class="link">第一个链接</a></li>
    <li><a href="#" class="link">第二个链接</a></li>
    <li><a href="#" class="link">第三个链接</a></li>
 </ul>
JavaScript
var box = document.getElementById("box");
var add = document.getElementById("add");

 add.onclick = function (ev1) {
     var li = document.createElement("li");
     li.innerHTML = "\<a href=#>新添加的链接</a>";
     box.appendChild(li);
 }

 box.onclick = function (event) {
     event = event || window.event;
     event.preventDefault();
     console.log(event.target.innerHTML);
 }
结果

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值