DOM事件机制(事件捕获和事件冒泡和事件委托)
内容：
1.事件复习
2.事件冒泡与事件捕获
3.事件委托
1.事件复习
(1)事件
事件是用来处理响应的一个机制，这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器
下面的链接描述了所有事件：https://developer.mozilla.org/en-US/docs/Web/Events
(2)事件绑定
事件绑定有3种方法，前两钟方法在这里不介绍，主要看第三种：
addEventListener方法(使用事件监听绑定事件)
addEventListener：
1 element.addEventListener(event, function, useCapture)
2 event : （必需）事件名，支持所有 DOM事件 注：事件名要去掉开头的on
3 function：（必需）指定要事件触发时执行的函数
4 useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false
2.事件冒泡与事件捕获
- 事件冒泡：从触发事件的那个节点一直到document，是自下而上的去触发事件
- 事件捕获：指从document到触发事件的那个节点，即自上而下的去触发事件
- 事件委托：利用了事件冒泡的原理
补充：绑定事件方法（addEventListener）的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。该参数默认为false，当对一个dom节点触发事件时，若外层的节点也设置了相应的事件函数，就会使外层的节点也触发自己的事件函数，而如果设置该参数为true，当对一个dom节点触发事件时，将从最外层开始触发事件而不是从这个dom节点开始！
阻止事件冒泡：event.cancelBubble = true
取消事件冒泡：
if(typeof e.cancelBubble == 'undefined'){
e.stopPropagation(); // 兼容IE
} else{
e.cancelBubble = true;
}
事件冒泡实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件冒泡和事件捕获</title>
<style>
#id1 {
background: lightblue;
padding: 20px;
}
#id2 {
background: lightyellow;
padding: 20px;
}
</style>
</head>
<body>
<div id='id1'>
<div id="id2">
<button id='id3'>id3 按钮</button>
</div>
</div>
<script>
var id1 = document.querySelector('#id1');
var id2 = document.querySelector('#id2');
var id3 = document.querySelector('#id3');
// 事件冒泡:
id1.addEventListener('click', function(event){
console.log('click id1', event)
});
id2.addEventListener('click', function(event){
console.log('click id2', event)
});
id3.addEventListener('click', function(event){
console.log('click id3', event) // 阻止事件冒泡
// event.cancelBubble = true
});
</script>
</body>
</html>
事件捕获实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件冒泡和事件捕获</title>
<style>
#id1 {
background: lightblue;
padding: 20px;
}
#id2 {
background: lightyellow;
padding: 20px;
}
</style>
</head>
<body>
<div id='id1'>
<div id="id2">
<button id='id3'>id3 按钮</button>
</div>
</div>
<script>
var id1 = document.querySelector('#id1');
var id2 = document.querySelector('#id2');
var id3 = document.querySelector('#id3'); // 事件捕获:
// addEventListener 的第三个参数 useCapture 设置为true
id1.addEventListener('click', function(event){
console.log('capture click id1', event)
}, true);
id2.addEventListener('click', function(event){
console.log('capture click id2', event)
}, true);
id3.addEventListener('click', function(event){
console.log('capture click id3', event)
}, true);
</script>
</body>
</html>
3.事件委托
事件委托相关概念
=== 在前端中一些元素是动态添加的
对于这样的元素, 我们没办法实现绑定事件
我们可以把 click 事件绑定在事先存在的父元素上
通过父元素响应click事件 调用相应的事件响应函数
而事件响应函数会被传入一个参数, 就是事件本身
然后在运行的时候通过 event.target 属性(发起事件的元素，例如某个按钮)
来检查被点击的对象是否是需要的对象, 如果是就可以对这个对象进行操作, 这个概念就是事件委托
事件委托实例：
<!-- author: wyb -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>事件委托实例</title>
</head>
<body> <div id="test">
<button class="i1">按钮1</button>
<button class="i2">按钮2</button>
<button class="i3">按钮3</button>
</div> </body> <script>
// 事件委托:
document.querySelector("#test").addEventListener("click", function (event) {
var target = event.target
log(target)
if(target.classList.contains("i1")){
alert("点击了按钮1")
}else if(target.classList.contains("i2")){
alert("点击了按钮2")
}else if(target.classList.contains("i3")){
alert("点击了按钮3")
}
})
</script> </html>
DOM事件机制(事件捕获和事件冒泡和事件委托)的更多相关文章
- 深入理解DOM事件机制系列第三篇——事件对象
× 目录 [1]获取 [2]事件类型 [3]事件目标[4]事件代理[5]事件冒泡[6]事件流[7]默认行为 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事 ...
- DOM事件机制解惑(摘)--事件的传播机制
DOM事件流 为什么是有事件流? 假如在一个button上注册了一个click事件,又在其它父元素div上注册了一个click事件,那么当我们点击button,是先触发父元素上的事件,还是button ...
- [解惑]JavaScript事件机制
群里童鞋问到关于事件传播的一个问题:“事件捕获的时候,阻止冒泡,事件到达目标之后,还会冒泡吗?”. 初学 JS 的童鞋经常会有诸多疑问,我在很多 QQ 群也混了好几年了,耳濡目染也也收获了不少,以后会 ...
- javascript的事件冒泡,阻止事件冒泡和事件委托， 事件委托是事件冒泡的一个应用。
首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会 ...
- JavaScript系列----事件机制
1.事件流 1.1.标准事件流 所谓的标准事件流指的的:EMCAScript标准规定事件流包含三个阶段,分别为事件捕获阶段,处于目标阶段,事件冒泡阶段. 下面是一段html代码,根据代码来说明标准事件 ...
- JavaScript事件机制——细思极恐
JavaScript事件机制,也有让人深思的东西.在一开始未深入了解,我头脑里有几个问题发出: 1. 自下而上(冒泡)事件怎么写,自上而下(捕获)又是怎么写? 2. 捕获型和冒泡型同时设置,谁生效? ...
- Aa3.0 事件机制
说明:本文由多处网络文章整理而成,在此未一一注明原文链接,敬请谅解! AS3:事件流机制 事件流 只要发生事件,Flash Player就会调度该事件对象. 如果事件目标不在显示列表中,则Flash ...
- JavaScript事件起泡与捕获
// 向 <div> 元素添加事件句柄 document.getElementById("myDIV").addEventListener("mousemov ...
- js的事件机制二
js的事件机制二 1.给合适的HTML标签添加合适的事件 onchange-----select下拉框 onload-----body标签 单双击-----用户会进行点击动作的HTML元素 鼠标事件 ...
- ALSA声卡驱动中的DAPM详解之七：dapm事件机制（dapm event）
前面的六篇文章,我们已经讨论了dapm关于动态电源管理的有关知识,包括widget的创建和初始化,widget之间的连接以及widget的上下电顺序等等.本章我们准备讨论dapm框架中的另一个机制:事 ...
随机推荐
- Java/JDK安装教程手册(正规图文全流程)、运行、环境配置
Java/JDK教程手册 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 一 Download Resouc ...
- Unity插件-NGUI使用教程
Unity插件-NGUI使用教程 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 1 NGUI 一款强大的次 ...
- ubuntu 部署wordPress
准备 LAMP 环境 1.安装 Apache2 sudo apt-get install apache2 -y 安装好后,您可以通过访问服务器IP地址 x.x.x.x 查看到 “it works” 界 ...
- VSCode搭建node + typescript开发环境
我们一起来喜欢TypeScript 现在写js不用TypeScript,伦家可能会觉得你是外星人. 是的,TypeScript很大程度增强了代码的可读性,可跟踪性,可维护性和减少了bug. 那么没有理 ...
- Chrome在Ubuntu中缺少依赖项，无法安装
在Ubuntu 13.04中,安装chrome会报下面这个错误(不知是不是因为我没有更新的原因:( ): 也就是缺少名为libxss1的包. 解决办法,当然可以很简单的去找libxss1这个包下载, ...
- （转）C++ 容器及选用总结
目录 ==================================================== 第一章 容器 第二章 Vector和string 第三章 关联容器 第四章 迭代器 第五 ...
- python 获取中文文件名的输出
#coding:utf8 if __name__ == '__main__': srcfile = u"D:/测试路径/测试文件.txt" f = open(srcfile.enc ...
- NOSQL之MEMCACHE
Memcached是一个自由开源的,高性能,分布式内存对象缓存系统.Memcached是一个自由开源的,高性能,分布式内存对象缓存系统.Memcached是一种基于内存的key-value存储,用来存 ...
- Spring核心思想：“控制反转”，也叫“依赖注入” 的理解
@Service对应的是业务层Bean,例如: @Service("userService") public class UserServiceImpl implements Us ...
- linux 命令：chmod权限设置命令
Linux系统中的每个文件和目录都有访问许可权限,用它来确定谁可以通过何种方式对文件和目录进行访问和操作. 文件或目录的访问权限分为只读,只写和可执行三种.以文件为例,只读权限表示只允许读其内容,而禁 ...