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
    评论
内容介绍 项目结构: Controller层:使用Spring MVC来处理用户请求,负责将请求分发到相应的业务逻辑层,并将数据传递给视图层进行展示。Controller层通常包含控制器类,这些类通过注解如@Controller、@RequestMapping等标记,负责处理HTTP请求并返回响应。 Service层:Spring的核心部分,用于处理业务逻辑。Service层通过接口和实现类的方式,将业务逻辑与具体的实现细节分离。常见的注解有@Service和@Transactional,后者用于管理事务。 DAO层:使用MyBatis来实现数据持久化,DAO层与数据库直接交互,执行CRUD操作。MyBatis通过XML映射文件或注解的方式,将SQL语句与Java对象绑定,实现高效的数据访问。 Spring整合: Spring核心配置:包括Spring的IOC容器配置,管理Service和DAO层的Bean。配置文件通常包括applicationContext.xml或采用Java配置类。 事务管理:通过Spring的声明式事务管理,简化了事务的处理,确保数据一致性和完整性。 Spring MVC整合: 视图解析器:配置Spring MVC的视图解析器,将逻辑视图名解析为具体的JSP或其他类型的视图。 拦截器:通过配置Spring MVC的拦截器,处理请求的预处理和后处理,常用于权限验证、日志记录等功能。 MyBatis整合: 数据源配置:配置数据库连接池(如Druid或C3P0),确保应用可以高效地访问数据库。 SQL映射文件:使用MyBatis的XML文件或注解配置,将SQL语句与Java对象映射,支持复杂的查询、插入、更新和删除操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值