JavaScript 事件处理机制
网景提出事件捕获(event capturing)的事件流。事件会从DOM模型的最外层开始发生,直到内部触发事件的元素为止。
当 button 单击时: document -> html -> body -> button
事件冒泡
微软提出了事件冒泡(event bubbling)
的事件流。事件会从触发事件的元素开始,一直向上层传播,直到 document 元素。事件冒泡可以形象地理解为:一颗石头投入水中,泡泡从水底冒出,越变越大。
-> body -> html -> document
最终标准
后来 w3c 采用折中的方式,统一的标准: 先捕获再冒泡。然而,并非所有的事件都会经过冒泡阶段,比如 focus/blur 事件就不会冒泡.
//useCapture 是否使用事件捕方式,默认为 false (冒泡) ,在这里只展示了 addEventListener 最基本应用.
element.addEventListener(event, function, useCapture)
element.addEventListener 可以给绑定多次.同时也调用 element.removeEventListener 移除绑定事件,而 element.onclick = funcA 形式,只会以最后一个绑定为准.
总体上来说,事件捕获先于事件冒泡, 即当一个元素绑定了两种事件传播方式的处理函数时,无论代码书写顺序如何,总是先执行捕获后执行冒泡.但这也并非绝对,当该元素同时是触发事件的元素时,则以代码书写顺序为准.
示例: 下面代码,有子父级两个元素,其中父级元素绑定了两种传播方式的回调.
当单击子元素时: click-parent--事件捕获 --> click-child---事件冒泡 --> click-parent--事件冒泡
当单击父元素时: click-parent--事件冒泡 --> click-parent--事件捕获
document.getElementById('parent').addEventListener("click",function(e){
console.log("click-parent---事件冒泡");
},false);
document.getElementById('parent').addEventListener("click",function(e){
console.log("click-parent--事件捕获");
},true);
document.getElementById('child').addEventListener("click",function(e){
console.log("click-child---事件冒泡");
},false);
事件代理
我们知道事件会在当前元素与根元素之间传递,所以说,在一个元素上产生的事件会向上传递给它的父元素,而不会向下传递给它的子元素.
利用事件流的特性,我们可以实现用在父级元素上绑定事件,再通过子元素去触发,省去了给众多子元素绑定事件的开销.
parent.onclick = function(e){
if(e.target.id == "child") console.log("点击了child元素")
}
JavaScript 事件处理机制的更多相关文章
- 私人定制javascript事件处理机制(浅谈)
看到园子里关于事件监听发表的文章,我都有点不好意思写了.不过想想我的题目以私人定制作开头也就妥妥地写吧. 事件相关概念 1.事件类型 发生事件的字符串 有传统事件类型 比如表单.window事件等 D ...
- 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- Javascript事件机制兼容性解决方案
本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTag ...
- 【探讨】javascript事件机制底层实现原理
前言 又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把 我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...
- 阅读《深入理解JavaScript定时机制》
鸟哥的这篇<深入理解JavaScript定时机制>从javascript线程角度分析了setTimeout和setInterval两个定时触发器的实现原理. 看完的体验就是主要要记住两点: ...
- 使用AmplifyJS和JQuery编写更好更优雅的javascript事件处理代码
事件(或消息)是一种经常使用的软件设计模式.可以减少消息处理者和消息公布者的之间的耦合,比方J2EE里面的JMS规范.设计模式中的观察者模式(也叫公布/订阅模式).这对于javascript代码相同适 ...
- JavaScript 内存机制
简介 每种编程语言都有它的内存管理机制,比如简单的C有低级的内存管理基元,像malloc(),free().同样我们在学习JavaScript的时候,很有必要了解JavaScript的内存管理机制. ...
- 【THE LAST TIME】彻底吃透 JavaScript 执行机制
前言 The last time, I have learned [THE LAST TIME]一直是我想写的一个系列,旨在厚积薄发,重温前端. 也是给自己的查缺补漏和技术分享. 欢迎大家多多评论指点 ...
- 深入理解JavaScript运行机制
深入理解JavaScript运行机制 前言 本文是写作在给团队新人培训之际,所以其实本文的受众是对JavaScript的运行机制不了解或了解起来有困难的小伙伴.也就是说,其实真正的原理和本文阐述的并不 ...
随机推荐
- cmd下【java监视和管理控制台】
不需要安装插件,只要jmeter的运行环境配置好就可以了:打开这个小工具的步骤很简单,如果你已经配置好了Jmeter运行的环境,那么你也就不用去做其他的配置,直接 点击:开始——>运行——> ...
- 关于Java抽象类,接口与实现接口及派生类继承基类
1. 抽象类 抽象类就是有一个或多个方法只被声明而未被实现. 抽象方法的声明以分号结束,并且用关键字abstract来说明它以标识它为抽象方法. 格式: public abstract class 类 ...
- mybatis使用中的记录
一: 常用sql语句: sql顺序:select [distinct] * from 表名 [where group by having order by limit]; 查询某段时间内的数据: ...
- 解放双手 | Jenkins + gitlab + maven 自动打包部署项目
前言 记录 Jenkins + gitlab + maven 自动打包部署后端项目详细过程! 需求背景 不会偷懒的程序员不是好码农,传统的项目部署,有时候采用本地手动打包,再通过ssh传到服务器部署运 ...
- odoo开发笔记--odoo可用小图标
odoo系统的小图标都采用了 fontawesome字体图标 官网: http://fontawesome.dashgame.com/ Github:http://fortawesome.github ...
- (转)python协程2:yield from 从入门到精通
原文:http://blog.gusibi.com/post/python-coroutine-yield-from/ https://mp.weixin.qq.com/s?__biz=MzAwNjI ...
- (转载)Centos下Elasticsearch安装详细教程
原文地址:http://www.cnblogs.com/sunny1009/articles/7874251.html Centos下Elasticsearch安装详细教程 1.Elasticsear ...
- C# 自定义类型通过实现IFormattable接口,来输出指定的格式和语言文化的字符串(例:DateTime)
常规的调用ToString()方法,存在两个问题. (1).调用者无法控制字符串的格式 (2).调用者不能方便的选择一种特定的语言文化来格式化字符串. 在开发一些国际化的应用时,应用程序需要调用与当前 ...
- logstash使用template提前设置好maping同步mysql数据到Elasticsearch5.5.2
上篇blog说到采用logstash-input-jdbc将mysql数据同步到ES(http://www.cnblogs.com/jstarseven/p/7704893.html),但是这里有一个 ...
- XAML属性赋值转换之谜(WPF XAML语法解密)
XAML与XML类似,就是XML延伸过来的.为了更好的表达一些功能,WPF对XML做了扩展,有些功能是WPF在后台悄悄的替你做了.有时候,虽然实现了某个功能,但是对实现原理还是很茫然.今天就讲讲XAM ...