JavaScript事件冒泡和捕获
- 事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。
- 事件冒泡是自下而上的去触发事件。
- 绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。true,事件捕获;false,事件冒泡。默认false,即事件冒泡。
例子
<div id='id1'>
<div id="id2">
<button id='id3'>id3 按钮</button>
</div>
</div>
var id1 = document.querySelector('#id1')
var id2 = document.querySelector('#id2')
var id3 = document.querySelector('#id3')
// 事件冒泡
id1.addEventListener('click', function(event){
console.log('click id1')
})
id2.addEventListener('click', function(event){
console.log('click id2')
})
id3.addEventListener('click', function(event){
console.log('click id3')
// 取消冒泡事件
// event.cancelBubble = true
})
// 点击id3输出
// click id3
// click id2
// click id1
// 事件捕获
id1.addEventListener('click', function(event){
console.log('capture click id1')
}, true)
id2.addEventListener('click', function(event){
console.log('capture click id2')
}, true)
id3.addEventListener('click', function(event){
console.log('capture click id3')
}, true)
// 点击id3输出
// capture click id1
// capture click id2
// capture click id3
JavaScript事件冒泡和捕获的更多相关文章
- JavaScript事件——冒泡、捕获
本节要点:1.干预系统的事件处理机制 (一)DOM事件流 (二)停止事件冒泡 (三)阻止事件的默认行为 1.干预系统的事件处理机制 (一)DOM事件流 DOM模型是一个树形结构,在DOM模型中,HTM ...
- JavaScript事件冒泡与捕获
event.preventDefault(); 如果event.cancelable的值为true,可以取消默认事件 event.cancelable; 元素是否可以取消 ...
- 解析Javascript事件冒泡机制
本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...
- 转:JavaScript事件冒泡简介及应用
(本文转载自别处) JavaScript事件冒泡简介及应用 一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理 ...
- JavaScript事件冒泡和事件委托
JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...
- JS 事件冒泡、捕获。学习记录
作为一个转行刚到公司的新人,任务不多,这一周任务全部消灭,闲暇的一天也别闲着,悄悄的看起了书.今天写一下JS的事件冒泡.捕获. 也是今天看的内容有点多了,有些消化不了,就随手记录一下.纯属自我理解,如 ...
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
- 事件冒泡与捕获&事件托付
设想这样一种情况 一个div里面有个span元素 ,当鼠标单击span时,这个事件算是谁的? div还是span? 准确的说两个都触发了,这种认可大家都允许,事实就是这种, 第二个问题来了,这个事件 ...
- [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡
当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...
随机推荐
- JNI由浅入深_10_JNI 综合开发
1.使用ndk-build时如果找不到某个类,可以使用下面两种方法解决: 1.1 进入src目录 D:\project3\JNIAndroid\src>set classpath=D:\proj ...
- 关于Oracle 数据库死锁 转
转自 https://zhidao.baidu.com/question/200422068111653165.html 一.数据库死锁的现象程序在执行的过程中,点击确定或保存按钮,程序没有响应,也没 ...
- navicat mysql 存储过程
存储过程如同一门程序设计语言,同样包含了数据类型.流程控制.输入和输出和它自己的函数库. 一.基本数据类型:略 二.变量: 自定义变量:DECLARE a INT ; SET a=100; 可用以 ...
- scrapy管道MySQL简记
import pymysqlfrom scrapy.exceptions import DropItemimport time class ErshouchePipeline(object): def ...
- 局域网内python socket实现windows与linux间简单的消息传送
有个需求,就是在windows上看见一篇介绍linux相关的文章,想在局域网内的另外一台linux电脑上尝试一下, 于是就需要把该网页链接发送给linux,不想一点一点敲链接,又苦于没有找到其它好的方 ...
- jQuey实现轮播图效果
再平常的浏览器页面,轮播图都是必不可缺少的一个板块,在这总结了一下轮播图基本的一些样式 首先介绍一下,本文实现的轮播图的基本效果: 1. 3s自动切换图片,图片切换时提示点跟随切换 2. 鼠标划到图片 ...
- iOS通过切片仿断点机制上传文件
项目开发中,有时候我们需要将本地的文件上传到服务器,简单的几张图片还好,但是针对iPhone里面的视频文件进行上传,为了用户体验,我们有必要实现断点上传.其实也不是真的断点,这里我们只是模仿断点机制. ...
- Redis数据库 : 基础
设置密码: /etc/redis/redis.conf 文件把 requirepass 取消注释并设置密码 取消只能本地登录的bind 同上面的配置文件 把 bind一行注释掉 带密码登录: redi ...
- 运行Delphi XE10的MongoDB例程,测试Delphi插入记录性能
Delphi XE10支持MongoDB的数据库,提供了个例子restaurants可批量导入数据. 本文对比Delphi例子与MongoDB自带的mongoimport导入批量数据的性能. 步骤: ...
- 树莓派3B+学习笔记:6、安装TeamViewer
TeamViewer是一个远程控制软件,它可以在任何防火墙和NAT代理的后台实现桌面共享和文件传输,界面简洁,操作简单,不需要专业知识就可轻松上手. TeamViewer电脑端下载网址www.team ...