深入分析原生JavaScript事件


Posted in Javascript onDecember 29, 2014

 JQuery这种Write Less Do More的框架,用多了难免会对原生js眼高手低。

     小菜其实不想写这篇博客,貌似很初级的样子,但是看到网络上连原生js事件绑定和解除都说不明白,还是决定科普一下了。

     首先声明,小菜懂的也不是很多,只是把我的思路和大家分享一下。

DOM0事件模型

     事件模型在不断发展,早期的事件模型称为DOM0级别。

     DOM0事件模型,所有的浏览器都支持。

     直接在dom对象上注册事件名称,就是DOM0写法,比如:

document.getElementById("test").onclick = function(e){};

     意思就是注册一个onclick事件。当然,它和这种写法是一个意思:

document.getElementById("test")["onmousemove"] = function(e){};

     这没什么,只不过是两种访问js对象属性的方法,[]的形式主要是为了解决属性名不是合法的标识符,比如:object.123肯定报错,但是object["123"]就避免了这个问题,与此同时,[]的写法,也把js写活了,用字符串表示属性名称,可以在运行时动态绑定事件。

     言归正传,事件被触发时,会默认传入一个参数e,表示事件对象,通过e,我们可以获取很多有用的信息,比如点击的坐标、具体触发该事件的dom元素等等。

     基于DOM0的事件,对于同一个dom节点而言,只能注册一个,后边注册的同种事件会覆盖之前注册的。例如:

 var btn = document.getElementById("test");

 btn.onmousemove = function(e){

   alert("ok");

 };

 btn["onmousemove"] = function(e){

   alert("ok1");

 };

     结果会输出ok1。

     接下来再说说this。事件触发时,this就是指该事件在哪个dom对象上触发。例如:

 var btn = document.getElementById("test");

 btn.onmousemove = function(e){

   alert(this.id);

 };

     结果输出test。因为事件就是在id为test的dom节点上注册的,事件触发时,this当然代表这个dom节点,可以理解为事件是被这个dom节点调用的。

     所以,想解除事件就相当简单了,只需要再注册一次事件,把值设成null,例如:

 var btn = document.getElementById("test");

 btn.onclick = function(e){

   alert("ok");

 };

 btn.onclick = null;

     原理就是最后注册的事件要覆盖之前的,最后一次注册事件设置成null,也就解除了事件绑定。

     事情还没结束,DOM0事件模型还涉及到直接写在html中的事件。例如:

<div id="test" class="test" onclick="exec();" ></div>

     通过这种方式注册的事件,同样遵循覆盖原则,同样只能注册一个,最后一个生效。

     区别就是,这样注册的事件,相当于动态调用函数(有点eval的意思),因此不会传入event对象,同时,this指向的是window,不再是触发事件的dom对象。

DOM2事件模型

     DOM2事件模型相对于DOM0,小菜仅仅了解如下两点:

          ·  DOM2支持同一dom元素注册多个同种事件。

          ·  DOM2新增了捕获和冒泡的概念。

     DOM2事件通过addEventListener和removeEventListener管理,当然,这是标准。

     但IE8及其以下版本浏览器,自娱自乐,搞出了对应的attachEvent和detachEvent,由于小菜才疏学浅,本文不做讨论。

     addEventListener当然就是注册事件,她有三个参数,分别为:"事件名称", "事件回调", "捕获/冒泡"。举个例子:

 var btn = document.getElementById("test");

 btn.addEventListener("click", function(e){

   alert("ok");

 }, false);

     事件名称就不用多说了,相比DOM0,去掉了前边的on而已。

     事件回调也很好理解,事件触发了总得通知你吧!回调时和DOM0一样,也会默认传入一个event参数,同时this是指触发该事件的dom节点。

     最后一个参数是布尔型,true代表捕获事件,false代表冒泡事件。其实很好理解,先来个示意图:

深入分析原生JavaScript事件

     意思就是说,某个元素触发了某个事件,最先得到通知的是window,然后是document,依次而入,直到真正触发事件的那个元素(目标元素)为止,这个过程就是捕获。接下来,事件会从目标元素开始起泡,再依次而出,直到window对象为止,这个过程就是冒泡。

     为什么要这样设计呢?这貌似是由于深厚的历史渊源,小菜也不怎么了解,就不乱说了。

     由此可以看出,捕获事件要比冒泡事件先触发。

     假设有这样的html结构:

 <div id="test" class="test">

   <div id="testInner" class="test-inner"></div>

 </div>

     然后我们在外层div上注册两个click事件,分别是捕获事件和冒泡事件,代码如下:

 var btn = document.getElementById("test");

 //捕获事件

 btn.addEventListener("click", function(e){

   alert("ok1");

 }, true);

 //冒泡事件

 btn.addEventListener("click", function(e){

   alert("ok");

 }, false);

     最后,点击内层的div,先弹出ok1,后弹出ok。结合上边的原理图,外层div相当于图中的body,内层div相当于图中最下边的div,证明了捕获事件先执行,然后执行冒泡事件。

     为什么要强调点击内层的div呢?因为真正触发事件的dom元素,必须是内层的,外层dom元素才有机会模拟捕获事件和冒泡事件,从原理图上就看出了。

     如果在真正触发事件的dom元素上注册捕获事件和冒泡事件呢?

     html结构同上,js代码如下:

 var btnInner = document.getElementById("testInner");

 //冒泡事件

 btnInner.addEventListener("click", function(e){

   alert("ok");

 }, false);

 //捕获事件

 btnInner.addEventListener("click", function(e){

   alert("ok1");

 }, true);

     当然还是点击内层div,结果是先弹出ok,再弹出ok1。理论上应该先触发捕获事件,也就是先弹出ok1,但是这里比较特殊,因为我们是在真正触发事件的dom元素上注册的事件,相当于在图中的div上注册,由图可以看出真正触发事件的dom元素,是捕获事件的终点,是冒泡事件的起点,所以这里就不区分事件了,哪个先注册,就先执行哪个。本例中,冒泡事件先注册,所以先执行。

     这个道理适用于多个同种事件,比如说一下子注册了3个冒泡事件,那么执行顺序就按照注册的顺序来,先注册先执行。例如:

 var btnInner = document.getElementById("testInner");

 btnInner.addEventListener("click", function(e){

   alert("ok");

 }, false);

 btnInner.addEventListener("click", function(e){

   alert("ok1");

 }, false);

 btnInner.addEventListener("click", function(e){

   alert("ok2");

 }, false);

     结果当然是依次弹出ok、ok1、ok2。

     为了进一步理解事件模型,还有一种场景,假如说外层div和内层div同时注册了捕获事件,那么点击内层div时,外层div的事件一定是先触发的,代码如下:

 var btn = document.getElementById("test");

 var btnInner = document.getElementById("testInner");

 btnInner.addEventListener("click", function(e){

   alert("ok");

 }, true);

 btn.addEventListener("click", function(e){

   alert("ok1");

 }, true);

     结果是先弹出ok1。

     假如外层div和内层div都是注册的冒泡事件,点击内层div时,一定是内层div事件先执行,原理相同。

     细心的读者会发现,对于div嵌套的情况,如果点击内层的div,外层的div也会触发事件,这貌似会有问题!

     点击的明明是内层div,但是外层div的事件也触发了,这的确是个问题。

     其实,事件触发时,会默认传入一个event对象,前边提过了,这个event对象上有一个方法:stopPropagation,通过此方法,可以阻止冒泡,这样外层div就接收不到事件了。代码如下:

 var btn = document.getElementById("test");

 var btnInner = document.getElementById("testInner");

 btn.addEventListener("click", function(e){

   alert("ok1");

 }, false);

 btnInner.addEventListener("click", function(e){

   //阻止冒泡

 e.stopPropagation();

   alert("ok");

 }, false);

     终于要说说怎么解除事件了。解除事件语法:btn.removeEventListener("事件名称", "事件回调", "捕获/冒泡");

     这和绑定事件的参数一样,详细说明下:

          ·  事件名称,就是说解除哪个事件呗。

          ·  事件回调,是一个函数,这个函数必须和注册事件的函数是同一个。

          ·  事件类型,布尔值,这个必须和注册事件时的类型一致。

     也就是说,名称、回调、类型,三者共同决定解除哪个事件,缺一不可。举个例子:

 var btn = document.getElementById("test");

 //将回调存储在变量中

 var fn = function(e){

   alert("ok");

 };

 //绑定

 btn.addEventListener("click", fn, false);

 //解除

 btn.removeEventListener("click", fn, false);

     要想注册过的事件能够被解除,必须将回调函数保存起来,否则无法解除。

DOM0与DOM2混用

     事情本来就很乱了,这又来个混合使用,还让不让人活了。。。

     别怕,混合使用完全没问题,DOM0模型和DOM2模型各自遵循自己的规则,互不影响。

     整体上来说,依然是哪个先注册,哪个先执行,其他就没什么了。

后记

     至此,原生js事件已经讲的差不多了,小菜仅仅知道这些而已,欢迎读者补充其他知识点。

     在实际应用中,真正的行家不会傻傻的真的注册这么多事件,一般情况下,只需在最外层dom元素注册一次事件,然后通过捕获、冒泡机制去找到真正触发事件的dom元素,最后根据触发事件的dom元素提供的信息去调用回调。

     也就是说,行家会自己管理事件,而不依赖浏览器去管理,这样即可以提高效率,又保证了兼容性,JQuery不就是这么做的嘛~

     好了,教程到此结束,希望对读者有所帮助!

Javascript 相关文章推荐
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 Javascript
初识简单却不失优雅的Vue.js
Sep 12 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
Vue波纹按钮组件制作
Apr 30 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
uni-app微信小程序登录授权的实现
May 22 Javascript
js实现数字跳动到指定数字
Aug 25 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 #Javascript
JavaScript实现三阶幻方算法谜题解答
Dec 29 #Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 #Javascript
jQuery中clearQueue()方法用法实例
Dec 29 #Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 #Javascript
浅谈JavaScript Array对象
Dec 29 #Javascript
JavaScript实现N皇后问题算法谜题解答
Dec 29 #Javascript
You might like
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
Jquery 设置标题的自动翻转
2009/10/03 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
小学岗位竞聘方案
2014/01/22 职场文书
科技之星事迹材料
2014/06/02 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
2014年优秀党员材料
2014/12/18 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏