JavaScript事件起泡与捕获
// 向 <div> 元素添加事件句柄
document.getElementById("myDIV").addEventListener("mousemove", myFunction); // 移除 <div> 元素的事件句柄
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
addEventListener() 方法用于向指定元素添加事件句柄。
element.addEventListener(event, function, useCapture) //语法
useCapture:可选。布尔值,指定事件是否在捕获或冒泡阶段执行。
- true - 事件句柄在捕获阶段执行
- false- false- 默认。事件句柄在冒泡阶段执行
事件捕获阶段capture phase,传播顺序:window -> 事件源的父元素. The event object must propagate through the target's ancestors from the Window to the target's parent.
事件冒泡阶段bubble phase,传播顺序:事件源父元素 -> window. The event object propagates through the target’s ancestors in reverse, starting with the target's parent and ending with the Window.
目标阶段target phase:事件对象到达事件源。The event object arrive at the event object's event target.
可参考相关文章 : https://www.cnblogs.com/zhuzhenwei918/p/6139880.html
http://blog.csdn.net/qq_28602957/article/details/60475123
JavaScript事件起泡与捕获的更多相关文章
- JavaScript事件——冒泡、捕获
本节要点:1.干预系统的事件处理机制 (一)DOM事件流 (二)停止事件冒泡 (三)阻止事件的默认行为 1.干预系统的事件处理机制 (一)DOM事件流 DOM模型是一个树形结构,在DOM模型中,HTM ...
- [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡
当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...
- JavaScript事件冒泡与捕获
event.preventDefault(); 如果event.cancelable的值为true,可以取消默认事件 event.cancelable; 元素是否可以取消 ...
- JavaScript事件冒泡和捕获
事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件. 事件冒泡是自下而上的去触发事件. 绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获.true,事件捕获:fa ...
- [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流
面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...
- javaScript事件机制深入学习(事件冒泡,事件捕获,事件绑定方式,移除事件方式,阻止浏览器默认行为,事件委托,模拟浏览器事件,自定义事件)
前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...
- JavaScript事件:事件处理模型(冒泡、捕获)、取消冒泡、阻止默认事件
(一)事件处理模型---事件冒泡.捕获 (1)事件冒泡 24 <body> 25 <div class="warpper"> 26 <div clas ...
- JavaScript事件捕获冒泡与捕获
事件流 JavaScript中,事件流指的是DOM事件流. 概念 事件的传播过程即DOM事件流.事件对象在 DOM 中的传播过程,被称为"事件流".举个例子:开电脑这个事,首先你是 ...
- javascript --- 事件冒泡与事件捕获
事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题.考虑下面这段代码,就不写html->head,body之类的代码了,自行 ...
随机推荐
- 流媒体之HLS——综述
[时间:2018-01] [状态:Open] [关键词:流媒体,stream,HLS] 0 HLS背景及初衷 HLS是由苹果公司发起的流媒体网络传输协议,可参考rfc8261 HTTP Live St ...
- 码云git 使用配置
码云git 使用配置:www.gitee.com安装:1.Git-2.18.0-64-bit.exe:2.GitExtensions-2.51.04.msi:3.GitExtensionsVSIX.v ...
- Android Studio报错Error:Failed to open zip file. Gradle's dependency cache may be corrupt
Android Studio导入项目后,Gradle编译失败,报错如下. Error:Failed to open zip file. Gradle's dependency cache may be ...
- mac 环境变量
在 ~/.bash_profile 中添加一行: export PATH=$PATH:/usr/local/bin 其中,/usr/local/bin 为需要添加的 path 执行 source .b ...
- Linux服务器重启后eureka报错
在Linux服务器重启后,首次启动应用时查看eureka注册中心,报错 EMERGENCY! EUREKA MAY BE INCORRECTLY CLAIMING INSTANCES ARE UP W ...
- opencv wlsfilter depth refinement demo
参考 https://docs.opencv.org/3.2.0/d3/d14/tutorial_ximgproc_disparity_filtering.html // This file is p ...
- 消息中间件系列四:RabbitMQ与Spring集成
一.RabbitMQ与Spring集成 准备工作: 分别新建名为RabbitMQSpringProducer和RabbitMQSpringConsumer的maven web工程 在pom.xml文 ...
- 为什么要用kafka、rabbit等消息队列
1.解耦: 允许你独立的扩展或修改两边的处理过程,只要确保它们遵守同样的接口约束. 2.冗余: 消息队列把数据进行持久化直到它们已经被完全处理,通过这一方式规避了数据丢失风险.许多消息队列所采用的&q ...
- Android深入源代码分析理解Aidl总体调用流程(雷惊风)
2017年開始上班的第一天.老不想工作了,假期感觉还没開始就已经结束了,唉,时间就是这样,新的一年開始了,尽管非常不想干正事,没办法,必须干起来.由于后边的路还非常长,距离六十岁还非常远. 刚上班也没 ...
- HTTP Headers 信息
点开一个条目,可以查看请求的详细信息: General —— 通用信息 Request URL:请求的URL Request Method:请求的方法 Status Code:响应状态 ...