js事件流 事件捕获 及时间冒泡详解
Javascript与HTML之间的交互是通过事件实现。
一、事件流
事件,是文档或浏览器窗口中发生的一些特定的交互瞬间。事件流,描述的是页面中接受事件的顺序。IE9,chrome,Firefox,Opera,Safari均实现了DOM2级规范中定义的标准DOM事件,而IE8和IE8以下版本仍然保留专有的事件处理方式。
事件冒泡
事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播。
<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Event Bubbling Example</title></head><style type="text/css">#myDiv{width:100px;height:100px;background-color:#FF0000;}</style><body><div id="myDiv"></div></body> </html>
当用户点击了<div>元素,click事件将按照<div>—><body>—><html>—>document的顺序进行传播。若在<div>和<body>上都定义了click事件,如下:
<script type="text/javascript">var div=document.getElementById("myDiv");div.οnclick=function(event){alert("div");};document.body.οnclick=function(event){alert("body");}; </script>
点击<div>,将先输出“div”,再输出“body”。
IE9,chrome,Firefox,Opera,Safari都支持事件冒泡,并将事件冒泡到window对象。
事件捕获
事件捕获是由Netscape Communicator团队提出来的,是先由最上一级的节点先接收事件,然后向下传播到具体的节点。当用户点击了<div>元素,采用事件捕获,则click事件将按照document—><html>—><body>—><div>的顺序进行传播。
若在<div>和<body>上都定义了click事件,如下:
<script type="text/javascript">var div=document.getElementById("myDiv"); div.addEventListener("click",function(event){alert("div");},true);document.body.addEventListener("click",function(event){alert("body");},true);</script>
(注:addEventListener具体使用见本文DOM2级事件处理)
点击<div>,将先输出“body”,再输出“div”。
IE9,chrome,Firefox,Opera,Safari都支持事件捕获,但是IE8和IE8以下的版本只支持事件冒泡。尽管DOM2规范要求事件应该从document对象开始传播,但是现在的浏览器实现都是从window对象开始捕获事件。
DOM事件流
"DOM2级事件”规定的事件流包含三个阶段:事件捕获阶段,处于目标阶段和事件冒泡阶段。首先发生的是事件捕获,然后是实际的目标接收到事件,最后阶段是冒泡阶段。以上面的HTML页面为例,单击<div>元素将按照下图触发事件:
若在<div>和<body>上都定义了click事件,如下:
<script type="text/javascript">var div=document.getElementById("myDiv"); div.οnclick=function(event){alert("div");};document.body.addEventListener("click",function(event){alert("event bubble");},false);document.body.addEventListener("click",function(event){alert("event catch");},true);</script>
点击<div>,将先输出“event catch”,再输出“div”,最后输出“event bubble”。
二、事件处理程序
事件是用户或浏览器自身执行的某种动作,而响应某个事件的函数叫做事件处理程序。HTML事件处理程序、DOM0级事件处理程序和IE事件处理程序均以“on”开头,DOM2级事件处理程序不需要加“on”。
HTML事件处理程序
通过将事件作为HTML元素的属性来实现,包含以下两种方法:
1
|
< input type="button" value="confirm" onclick="alert('confirm')" />
|
或者调用其他地方定义的脚本:
<script type="text/javascript">function showMessage() {alert("confirm");} </script> <input type="button" value="confirm" οnclick="showMessage()"/>
(注:函数定义必须放在调用之前)
DOM0级事件处理程序
通过Javascript指定事件处理程序的传统方式,所有浏览器均支持。每个元素(包括window,document)都有自己的事件处理程序属性,但是必须在DOM节点加载完之后才会有效。如下所示:
<script type="text/javascript">var div = document.getElementById("myDiv");div.onclick = function(event) {alert("div");};</script>
使用DOM0级方法指定的事件处理程序被认为是元素的方法,在元素的作用域中运行。this引用当前元素,如下:
<script type="text/javascript">var div = document.getElementById("myDiv");div.onclick = function(event) {alert(this.id);};</script>
输出“myDiv”。
删除通过DOM0级方法指定的事件处理程序:div.οnclick=null;
DOM2级事件处理程序
IE9,chrome,Firefox,Opera,Safari均实现了DOM2级事件处理程序,绑定事件方法addEventListener()接收三个参数:事件名称,事件处理函数和一个布尔值。布尔值为true,则表示在捕获阶段调用事件处理程序;如果为false,则表示在冒泡阶段调用事件处理程序。addEventListener允许在同一个元素上添加多个事件处理程序,如下所示:
<script type="text/javascript">var div = document.getElementById("myDiv");div.addEventListener("click", function(event) {alert("event bubble");}, false);div.addEventListener("click", function(event) {alert("event catch");}, true);</script>
先输出“event bubble”,后输出“event catch”,说明addEvenListener绑定的处理程序执行顺序和绑定顺序相同。
通过DOM2级事件处理程序指定的方法,this也引用当前元素,如下:
<script type="text/javascript">var div = document.getElementById("myDiv");div.addEventListener("click", function(event) {alert(this.id);}, false);</script>
输出“myDiv”。
删除DOM2级事件处理程序,采用removeEventListener(),删除时传入的参数必须和绑定时传入的参数相同,不能传入匿名函数。如下所示:
<script type="text/javascript">var div = document.getElementById("myDiv");var handler=function(event){alert("delete");}; div.addEventListener("click",handler,false);div.removeEventListener("click",handler,false);</script>
IE事件处理程序
IE8和IE8以下的版本不支持addEventListener(),而是采用attachEvent()来实现事件绑定。目前只有IE和Opera支持attachEvent()。IE9支持addEventListener(),同时也兼容IE8的attachEvent()方法,但是IE9和IE8对attachEvent()的实现有点不同。如下所示:
<script type="text/javascript">var div = document.getElementById("myDiv");div.attachEvent("onclick", function(event) {alert("1");});div.attachEvent("onclick", function(event) {alert("2");});</script>
IE9和IE10先输出“1”,再输出“2”,而IE8和IE7先输出“2”,再输出“1”。
删除IE事件处理程序,采用detachEvent(),删除时传入的参数必须和绑定时传入的参数相同,不能传入匿名函数。如下所示:
<script type="text/javascript">var div = document.getElementById("myDiv");var handler = function(event) {alert("delete");};div.attachEvent("onclick",handler);div.detachEvent("onclick",handler);</script>
总结:attachEvent()采用冒泡方式,而addEventListener()可以采用冒泡或事件捕获方式。
先按由上往下的顺序执行事件捕获的执行程序,再执行目标元素的执行程序,最后按由下往上的顺序执行冒泡事件。代码如下所示:
<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Event Bubbling Example</title></head><style type="text/css">#child {width: 100px;height: 100px;background-color: #FF0000;}</style><body><div id="parent"><div id="child"></div></div></body><script type="text/javascript">var parent = document.getElementById("parent");var child = document.getElementById("child");child.onclick = function(event) {alert("child");};document.body.addEventListener("click", function(event) {alert("body:event bubble");}, false);parent.attachEvent("onclick", function(event) {alert("parent:event bubble");});document.body.addEventListener("click", function(event) {alert("body:event catch");}, true);parent.addEventListener("click", function(event) {alert("parent:event catch");}, true);</script> </html>
输出顺序:body:event catch—>parent:event catch—>child—>parent:event bubble—>body:event bubble
摘自:https://www.cnblogs.com/linxuehan/p/3623760.html
转载于:https://www.cnblogs.com/Mr-Rshare/p/9903548.html
js事件流 事件捕获 及时间冒泡详解相关推荐
- JS事件流(事件冒泡 事件委托)
DOM事件流 事件流描述的是从页面中接受事件的顺序 事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流 分为三个阶段: 捕获阶段(从上往下,从外往内) 目标阶段 冒泡阶段(从下往 ...
- Android 事件分发机制分析及源码详解
Android 事件分发机制分析及源码详解 文章目录 Android 事件分发机制分析及源码详解 事件的定义 事件分发序列模型 分发序列 分发模型 事件分发对象及相关方法 源码分析 事件分发总结 一般 ...
- 微信公众平台菜单编辑php,Vue.js实现微信公众号菜单编辑器步骤详解(上)
这次给大家带来Vue.js实现微信公众号菜单编辑器步骤详解(上),Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下. 学习一段时间Vue.js,于是想尝试着做一个像 ...
- java web流量阀值_Javaweb应用使用限流处理大量的并发请求详解
在web应用中,同一时间有大量的客户端请求同时发送到服务器,例如抢购.秒杀等.这个时候如何避免将大量的请求同时发送到业务系统. 第一种方法:在容器中配置最大请求数,如果大于改请求数,则客户端阻塞.该方 ...
- JS逆向之补环境过瑞数详解
JS逆向之补环境过瑞数详解 "瑞数" 是逆向路上的一座大山,是许多JS逆向者绕不开的一堵围墙,也是跳槽简历上的一个亮点,我们必须得在下次跳槽前攻克它!! 好在现在网上有很多讲解瑞数 ...
- 【Java网络编程与IO流】Java之Java Servlet详解
Java网络编程与IO流目录: [Java网络编程与IO流]Java中IO流分为几种?字符流.字节流.缓冲流.输入流.输出流.节点流.处理流 [Java网络编程与IO流]计算机网络常见面试题高频核心考 ...
- mysql 获取当前整点_Oracle 生成未来三天的整点时间(步骤详解)
需求:X坐标轴时间都为整点时间,展示未来三天内的预测(x轴展示未来三天的整点时间),每3个小时一个刻度,横坐标共计24个刻度 步骤一:取当前时间 SELECT SYSDATE FROM DUAL 步骤 ...
- Node.js中package.json中库的版本号详解(^和~区别)
Node.js中package.json中库的版本号详解(^和~区别) 当我们查看package.json中已安装的库的时候,会发现他们的版本号之前都会加一个符号,有的是插入符号(^),有的是波浪符号 ...
- linux脚本日期时间,Linux 日期和时间操作详解
Linux 日期和时间操作详解 发布时间:2012-11-27 15:10:07 作者:佚名 我要评论 Linux将时钟分为系统时钟(System Clock)和硬件(Real Time Cl ...
- Linux 创建网页服务,Linux使用Node.js建立访问静态网页的服务实例详解
Linux使用Node.js建立访问静态网页的服务实例详解 一.安装node.js运行所需要的环境,: 二.创建node目录(/node/www),并在目录下创建node.js服务文件server.j ...
最新文章
- neo4j安装_SpringBoot使用Neo4j
- 微生物组—宏基因组分析专题培训开课啦!10月北京
- 量子计算赛道上的巨头拉锯战
- Android Prelink实现的源码分析
- 简单的脚本控制面试题
- nagios客户端nrped服务方式启动脚本
- linux适应环境,Linux从入门到适应(一):VSCode C++环境配置
- 如何得到发送邮件服务器地址(SMTP地址)
- django项目如何连接前端_Django项目中前端序列化参数获取
- php fitnesse,Fitnesse+RestFixture:Web 服务回归测试利器
- C#中string.format用法详解
- 国人不能再过度迷信开源软件
- 东方甄选推独立App自立门户;西湖大学『强化学习数学基础』教材书稿;经典书籍『深入浅出设计模式』Python版代码;前沿论文 | ShowMeAI资讯日报
- 【Golang】go中如何在浏览器上实时显示cmd控制台的输出(流式传输)
- cubieboard服务器系统,CubieBoard_搭建自己的系统.pdf
- 桌面版vscode用免费的微软4核8G服务器做远程开发(编译运行都在云上,还能自由创建docker服务)
- 市面上主流编辑器介绍(2021/05/20)
- 现在快手流量怎么样?如何增加流量?
- RPA for Python(tagui)避坑指南 - 以咸鱼之王为例
- 计算机视觉学习——投影与三维视觉——本征矩阵和基础矩阵
热门文章
- win7 mac虚拟机linux,Mac虚拟机parallels desktop超详细安装Win7图文分解
- 电脑远程服务_上海苹果笔记本电脑维修寄修上门服务远程双系统组装机安重装更换主板键盘屏...
- php分销根据上级id获取上级姓名,无限级分销系统查自己上级、下级之多叉树实现关系速查...
- Python日志保存 -- print内容输出到txt文件、nohup时的输出保存
- [转] Scala Try 与错误处理
- 20170314--服务器监控
- Ubuntu下VIM的安装和基本用法
- SQL Server 2008 存储结构之DCM、BCM
- 进程切换与线程切换的区别
- 点击流日志分析项目实战开发流程