理解javascript中DOM事件


Posted in Javascript onDecember 25, 2015

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

​标题为理解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所示:

理解javascript中DOM事件

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

理解javascript中DOM事件

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

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

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

理解javascript中DOM事件

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

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

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

理解javascript中DOM事件

理解javascript中DOM事件

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

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

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

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

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

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

理解javascript中DOM事件

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

理解javascript中DOM事件

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

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

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

理解javascript中DOM事件

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

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

Javascript 相关文章推荐
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
理解JavaScript中worker事件api
Dec 25 #Javascript
基于jquery实现省市区三级联动效果
Dec 25 #Javascript
js实现文本框输入文字个数限制代码
Dec 25 #Javascript
js实现简单的验证码
Dec 25 #Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 #Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 #Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 #Javascript
You might like
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
Python学生信息管理系统修改版
2018/03/13 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
python读取xlsx的方法
2018/12/25 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
公司培训欢迎词
2014/01/10 职场文书
2014自主招生自荐信策略
2014/01/27 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
特此通知格式
2015/04/27 职场文书
我的长征观后感
2015/06/09 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
青年教师听课心得体会
2016/01/15 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
Pandas数据类型之category的用法
2021/06/28 Python