谈谈我对JavaScript DOM事件的理解


Posted in Javascript onDecember 18, 2015

什么是事件?

事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水。当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情,比如说某个 Web 页面加载完成,或者是用户滚动窗口或改变窗口大小。

通过使用 JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应。

DOM与事件是JavaScript最核心的组成部分之一,他们赋予了页面无限的想象空间,你根本无法离开他们,否则js将寸步难行。在我们平时的开发过程中,jQuery的出现使得我们得心应手,然而你必须知道,jQuery之所以把事情简单化,是得益于JavaScript本身提供的强大的API,你应该去熟悉它们。

首先,此文不讨论繁琐细节,但是考虑到读者的心灵感受,本着以积极向上的心态,在此还是会列举示例说明。

​标题为理解DOM事件,那么在此拿一个简单的点击事件为例,希望大家看到这个例子后能触类旁通。
 最初我们给页面实现点击,就像下面这样的简单操作。

先定义一个块如<div id="weiyuzhou">微宇宙</div>,之后在<script type="text/javascript"></script>内部实现id为weiyuzhou的点击事件,如下代码所示:

var wyz = document.getElementById('weiyuzhou');
wyz.onclick = function () {
confirm(arguments.length)
}

确保上面这些步骤都没问题的话,我们才可以继续的往下走,然后我们在IE浏览器(低版本)看到弹出0,确切的说,IE8以下(包含IE8)的弹出0,反之弹出1。接着我在firefox浏览器看到弹出1。也就是说在IE8以下版本事件的触发不存在于函数的作用域内部,是不是说IE8以下的事件触发发生在全局作用域中,此处留个悬念,但是,可以肯定的是IE8以下事件的方法并没有这个Event参数,也就是说arguments的长度为0,如下视图5-02所示:

5-02

谈谈我对JavaScript DOM事件的理解

于是,我们看firefox浏览器窗口弹出1,说明事件存在于函数内部,再次证明方法的内部数组arguments长度为1,并且是可枚举的变量,也可以说可写,如下视图5-03所示。

5-03

谈谈我对JavaScript DOM事件的理解

如果,你还是不明白其中的原理,你不防去看一下《web前端开发修炼之道》书上第169页,然后再回过头来看此处文章摘要,可能会让你更加深层次的了解书中的内容。

接下来,我们该怎么办呢,我们肯定不能让IE和firefox返回的事件输出不相同,那么如何让IE和firefox下弹出的内容都一样。

衔接上一段内容,下面给点击函数的内部设置一个参数,参数名为e,然后在IE和firefox浏览器下面同时触发点击事件,我们看到firefox下面显示e为鼠标事件[object MouseEvent],IE8下报错,弹出错误信息未定义undefined。此时你要问我错在哪里,咱们回到刚刚的那句话‘此处留个悬念'进行分析,IE8以下的浏览器的事件是不是发生在全局作用域中,从视图5-02所示看到有一个global全局对象,我们可以对global展开搜索,global的继承的方法有一个event事件,找到了IE8的专有事件方法window继承event,于是我们对这个参数e设置为window.event进行一个调试,目前我们在IE8下面看到返回了一个事件[object event],如图5-04所示。

5-04

 谈谈我对JavaScript DOM事件的理解

想必你一定发现了IE8和firefox浏览器下对话框的事件返回值各不不同,IE8的对话框[object MouseEvent],firefox的对话框[object event],那我们怎么让IE8和firefox下的返回值都相同呢?

看到这里,你的心里是不是有点小沮丧,挖坑挖了这么久了,怎么还没有看到水流出来,别急,正题才刚刚开始,咱们不闲聊,继续围绕正题展开分析,通过刚刚的返回值,我们继续使用断点的方法寻找能够实现IE和firefox的返回值的共同点。

经由以上分析,我们查找发现firefox下的event有我们需要的方法名可以被调用,当然,我们查找发现IE8下面的srcElement也有我们所需的方法名可以被调用,于是乎,呵呵!看到这里你的内心是不是有点小激动,一步步排除,最后发现也没有什么难的。回到正题,现在我们声明一个变量var e_child = e.srcElement || e.target; 然后我们在IE8和firefox浏览器上看到对话框信息都为[object HTMLDivElement],如图5-05所示。

5-05

 

谈谈我对JavaScript DOM事件的理解

谈谈我对JavaScript DOM事件的理解

现在我们解决了不同浏览器的返回值不同的问题,也就是说解决了兼容的问题,这只是冰上一角。

下面我们要解决实现窗口的容器触发事件,主要是基于上面的结构进行的一次分析。

当你有了上面基础的话,下面的内容相对于上面而言比较简单一点。

还是以上一个页面的块为例,现在我继续往块<div id="weiyuzhou">微宇宙</div>增加一个子容器,这个子容器为行内元素<span id='coz'>koringz</span>,取id名为coz,然后给这个元素也加一个点击事件代码同上函数,为了能区别开文本内容之间的差异。

当我分别在IE8和firefox下点击容器的内容,出现了怪异的情况,在firefox浏览器的窗口上点击时,点击中文文本内容弹出来对话框‘微宇宙',我再点击koringz时,发现弹出了二次对话框,弹出内容都为'koringz',那是因为我点击子容器的时候触发了上一层的点击行为,如何解决点击koringz弹出二次对话框的问题,了解一点js的程序员都知道这是冒泡事件。

那么在firefox能够清除冒泡事件的是event下的stopPropagation,于是我们给第二次点击事件函数代码块之后面加一行代码e.stopPropagation();之后再点击koringz发现弹出一次'koringz'。如图5-06所示

 5-06

 谈谈我对JavaScript DOM事件的理解

接下来在IE8下面测试一下,发现在IE8浏览器点击也弹出二次,解决IE8的停止冒泡事件为cacelBubble,且我们只需要给cacelBubble设置为true即可。

因为IE8下global包含的event属性cacelBubble不是一个方法,而是一个输出布尔值的对象,所以这个和firefox有所不同,只是firefox把此事件封装成方法而已。好了,现在我们给第二次点击的事件代码块之后再加一行代码e.cancelBubble = true;然后在IE8浏览器下测试,之后再点击koringz发现也弹出一次。如图5-07所示

5-07

 谈谈我对JavaScript DOM事件的理解

注意上面的停止冒泡的事件的代码可以根据浏览器的不同分开来写,如何分开写,我们查看IE8浏览器下面的document发现存在对象all,而在firefox却没有没有这个all属性,这也就是说document.all是IE8版本下面独有的一个属性。通过它我们可以区分浏览器的冒泡事件。

到目前为止,我们解决了窗口的冒泡事件,接下来,我们要解决一个事件因被多人定义而覆盖原函数的问题。也可能是说某公司之前的工作人员添加了此事件,后来新员工接手项目后添加修改此事件而覆盖了原事件的执行所产生的问题。也就是说给当前id多次添加此类事件都不会覆盖此事件的原函数执行。

在firefox下的window包含有addEventListener(type, listener, useCapture)的方法,随后我们在<script type="text/javascript"></script>内部定义此监听事件domElement.addEventListener('click',function(e){confirm(e+'e')},false);,接着在firefox浏览器点击内容弹出二次,最后一次弹出为[object MouseEvent]e,后面多了一个e,这是我有意加上用以区别的。如图5-08所示。

5-08

 谈谈我对JavaScript DOM事件的理解

接下来在IE8下测试发现addEventListener错误,但是看到window下有此类方法(尝试了一下,原来此类方法在IE9以上版本是可以被支持),IE8同时还有一个attachEvent(event, pdisp),那么我们设置监听事件wyz.attachEvent('onclick',function(e){confirm(e + 'e')}),注:event为'onclick',紧接着在IE8下点击发现可弹出二次,最后一次eIE。此时on('click',pdisp)和attachEvent(event,pdisp)可以共同使用。

综上所述,我们解决了DOM事件的兼容性,DOM事件的冒泡,以及DOM事件的重用。

Javascript 相关文章推荐
JQuery 浮动导航栏实现代码
Aug 27 Javascript
js 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
JavaScript 中的六种循环方法
Jan 06 Javascript
什么是SOLID
Mar 24 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 #Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 #Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 #Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 #Javascript
jQuery Validate表单验证深入学习
Dec 18 #Javascript
JavaScript计划任务后台运行的方法
Dec 18 #Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 #Javascript
You might like
玩转图像函数库―常见图形操作
2006/09/03 PHP
PHP 身份证号验证函数
2009/05/07 PHP
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
python读文件逐行处理的示例代码分享
2013/12/27 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
Python爬取梨视频的示例
2021/01/29 Python
大型活动策划方案
2014/01/12 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
2014年防汛工作总结
2014/12/08 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
人民的好儿女观后感
2015/06/18 职场文书
奠基仪式致辞
2015/07/30 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python