Js事件处理模型/周期
有3个阶段
1、 捕获阶段：由外向内，记录各级父元素上绑定的事件处理函数---只记录，不触发。
2、 目标触发：优先触发目标元素上的事件处理函数。
3、 冒泡：由内向外，按捕获的顺序的相反的方向，依次执行父元素上的事件处理函数。
过程如下图所示:
如果希望阻止某些冒泡行为,如表单验证失败时,不允许提交,可以使用e.stopPropagation();取消冒泡:
什么时候使用利用冒泡:
都知道,浏览器通过遍历方式查找事件处理函数执行。如果添加的事件监听越多，遍历越慢，网页响应速度越慢,因此
尽量少的添加事件监听.
如果多个平级子元素绑定相同事件时，可在父元素仅添加一个事件监听，所有子元素共用,并且使用e.target获取目标元素.
下面的代码是一个很经典的理解事件处理的例子:
这里,咱希望的是,点击那个div,那个就变黄,可是如果不加e.stopPropagation的话,在点击d3或d2时,都会冒泡执行其父元素的操作,
比如点击,最里面的d3,上面的d2,d1都会依次变黄.
<!DOCTYPE HTML>
<html>
<head>
<title>事件处理</title>
<meta charset="utf-8"/>
<style>
.d1 .d2 .d3{cursor:pointer}
.d1 {
background-color: green;
position: relative;
width: 150px;
height: 150px;
text-align: center;
cursor: pointer;
} .d2 {
background-color: blue;
position: absolute;
top: 25px;
left: 25px;
width: 100px;
height: 100px;
} .d3 {
background-color: red;
position: absolute;
top: 25px;
left: 25px;
width: 50px;
height: 50px;
line-height: 50px;
} </style> </head>
<body>
<div class="d1">
<div class="d2">
<div class="d3">
</div>
</div>
</div>
<script>
function highLight(e){
this.style.background="yellow";
alert(this.className);
this.style.background="";
//取消冒泡 如果不加的话,在点击d3或d2时,都会冒泡执行其父元素的操作
e.stopPropagation();
}
document.querySelector(".d1")
.addEventListener(
"click",highLight);
document.querySelector(".d2")
.addEventListener(
"click",highLight);
document.querySelector(".d3")
.addEventListener(
"click",highLight);
</script>
</body>
</html>
Js事件处理模型/周期的更多相关文章
- Tensoflw.js - 02 - 模型与内存管理（易懂）
Tensoflw.js - 02 - 模型与内存管理(易懂) 参考 W3Cschool 文档:https://www.w3cschool.cn/tensorflowjs/ 本文主要翻译一些英文注释,添 ...
- Java NIO 与 基于reactor设计模式的事件处理模型
Java NIO非堵塞应用通常适用用在I/O读写等方面,我们知道,系统运行的性能瓶颈通常在I/O读写,包括对端口和文件的操作上,过去,在打开一个I/O通道后,read()将一直等待在端口一边读取字节内 ...
- js事件处理 —— 详解
对于JS事件处理分为四部分: 1.html事件处理程序 直接添加到HTML结构中 解析:用html处理程序可以直接在button元素里直接调用,但是维护性不是很方便 <!DOCTYPE html ...
- JS线程模型&Web Worker
js线程模型 客户端javascript是单线程,浏览器无法同时运行两个事件处理程序 设计为单线程的理论是,客户端的javascript函数必须不能运行太长时间,否则会导致web浏览器无法对用户输入做 ...
- js盒子模型
1.js盒子模型 指的是通过js中提供的一系列的属性和方法,获取页面中元素的样式信息值 例: #box有很多自己的私有属性: HTMLDivElement.prototype->HTMLElem ...
- JS盒模型
JS盒模型 ***** 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue('width')) parseIn ...
- 小程序基础知识点讲解-WXML + WXSS + JS，生命周期
小程序基础 小程序官方地址,小程序开发者工具,点击此处下载.在微信小程序中有一个配置文件project.config.json,此文件可以让开发者在不同设备中进行开发. 微信小程序共支持5种文件,wx ...
- 深入浅析Node.js单线程模型
Node.js采用 事件驱动 和 异步I/O 的方式,实现了一个单线程.高并发的运行时环境,而单线程就意味着同一时间只能做一件事,那么Node.js如何利用单线程来实现高并发和异步I/O?本文将围绕这 ...
- js事件处理-整理
<!-- 作者:gentiana@163.com 时间:2016-3-10 描述:js事件处理 --> <!DOCTYPE html> <html> <hea ...
随机推荐
- 向html当中插入数据
].;i<obj.length;i++){ $('#compclass').append("<option>"+obj[i].fields.name+" ...
- 【转】Python操作 RabbitMQ、Redis、Memcache、SQLAlchemy
Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...
- bootstrap datatable 参考文档
start:http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/ 扩展 http://issues.wenzhixin.net ...
- Jsoup学习总结
Jsoup学习总结 摘要 Jsoup是一款比较好的Java版HTML解析器.可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方 ...
- javascript 中的比较大小，兼 typeof()用法
javascript中的排序: 1.不同类型 比 类型 (字符串 > 数字) 2.同类型:(字符串 比 按字母顺序 )(数字 比 大小) 测试: <!DOCTYPE html> ...
- zoj2432
/* 首先,dp的最开始是定义状态 dp[i][j] 表示A串的前i个,与B串的前j个,并以B[j]为结尾的LCIS 的长度. 状态转移方程: if(A[i]==B[j]) dp[i][j]=max( ...
- Sybase：delete与truncate、drop区别
Sybase:delete与truncate.drop区别 区别: TRUNCATE TABLE TABLENAME:删除内容.释放空间但不删除定义. DELETE FROM TABLENAME:删除 ...
- 20145201《Java程序设计》第8周学习总结
20145201 <Java程序设计>第八周学习总结 教材学习内容总结 第十五章 通用API 15.1 日志 15.1.1 日志API简介 java.util.logging包提供了日志功 ...
- Facebook力推导航库:React Navigation使用详解
本文来自Songlcy投稿:文章地址:http://blog.csdn.net/u013718120/article/details/72357698 一.开源库介绍 今年1月份,新开源的react- ...
- js实现继承的方式
[原文] 前言 JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一.那么如何在JS中实现继承呢?让我们拭目以待. JS继承的实现方式 既然要实现继承,那么首先我们得有一个父类,代码如下: // ...