JavaScript Event学习第五章 高级事件注册模型


Posted in Javascript onFebruary 07, 2010

W3C和微软都着力于发展自己的事件注册模型来取代Netscape的传统模型。虽然对于微软的模型我不是很感冒,但是w3c的还是不错的,除了这个鼠标定位 的问题。不过现在只有小部分浏览器支持。
W3C
W3C的DOM层面事件规范注意到了传统模式的问题。他对于你想在一个元素上绑定多个事件提供了一个很好的解决办法。
W3C事件注册模型的关键就是addEventListener()。你给他三个参数:事件类型,要执行的函数和一个布尔值(true或者false)我一会再解释。把我们熟知的doSomething()函数注册到一个元素的onclick事件上,你可以这样做:
element.addEventListener('click',doSomething,false)
这种模型的魅力在于我们可以想加多少监听就可以加多少。如果用我们之前的传统模式里面的例子,我们就可以写成这样:
element.addEventListener('click',startDragDrop,false)
element.addEventListener('click',spyOnUser,false)
当用户点击元素的时候两个事件处理程序都会执行。需要注意的是W3C标准不能确定哪个事件先执行。所以你也不能认为startDragDrop()就在spyOnUser()之前执行。
移除事件处理程序也是非常的简单,用removeEventListener()就行了。所以:
element.removeEventListener('click',spyOnUser,false)
就会移除第二个事件处理程序但是第一个不会发生变化。非常漂亮的程序,完全解决了传统模式下的问题。

匿名函数
在W3C模式下你依然可以使用匿名函数:

element.addEventListener('click',function () { 
this.style.backgroundColor = '#cc0000' 
},false)

true或者false
true或者false是addEventListener的最后一个参数,意思是你想让你的函数在捕获阶段还是冒泡阶段执行。如果你不确定,那就使用false(冒泡阶段)。
this
在JavaScript里this关键字通常指函数的所有者。如果this指向事件发生的HTML元素,那么一切都是那么的美好,你可以很简单的做很多事情。
不幸的是,虽然this非常的强大,但是如果你不是明确的知道他怎么运作的话使用起来还是比较难的。关于这个我在另一个地方有详细的讨论。
在w3c模型下他的运作和在传统模式下是一样的:他表示现在正在处理事件的HTML元素。
element.addEventListener('click',doSomething,false); 
another_element.addEventListener('click',doSomething,false); 
function doSomething() { 
this.style.backgroundColor = '#cc0000'; 
}

如果你把doSomething()注册在任意一个HTML元素的click实践上,那么当用户点击的时候这个元素的背景就会变成红色。

哪个事件处理程序被注册了呢?
现在这个W3C事件注册模式有一个问题就是你不知道一个元素都有哪些事件处理程序被注册了。在传统模式下面你可以:
alert(element.onclick)
你就可以看到哪些函数注册了,undefined就是没有函数注册在这个事件上。只是在最近的DOM Level 3事件中W3C才添加了一个eventListenerList来存储已经注册了的事件处理程序。因为太新了,鲜有浏览器支持。然而,问题已经解决了。
还好的是removeEventListener()不会因为你没有注册元素的某个事件而返回错误,所以你可以不用担心的使用removeEventLister()。
微软
微软也有一个事件注册模型。跟W3C的很像,但是有一个严重的缺陷。
注册一个事件处理程序,attach到一个元素:
element.attachEvent('onclick',doSomething)
或者,你需要两个事件处理程序:
element.attachEvent('onclick',startDragDrop)
element.attachEvent('onclick',spyOnUser)
移除一个也非常简单:
element.detachEvent('onclick',spyOnUser)

缺陷
跟W3C的相比较,微软有两个严重的问题:
、事件总是冒泡,没有被捕捉的可能。
、事件处理程序是被引用的,而不是拷贝的,所以this关键字总是指向window然后就一点用都没有。
这两个问题的结果就是如果一个事件冒泡了那么你是没有可能知道哪个元素在处理事件。在后面的事件顺序一章我会详细的解释。
而且微软的标准只被IE支持,也不能用来跨浏览器。就算你只是给windows浏览器写脚本也最好别用,因为冒泡问题会让事情变得不可收拾。
继续
如果你想继续学习,请看下一章。
原文地址:http://www.quirksmode.org/js/events_advanced.html
第一次翻译 大家多多包含 我的twitter:@rehawk

Javascript 相关文章推荐
Javascript中各种trim的实现详细解析
Dec 10 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
javascript求日期差的方法
Mar 02 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
js实现继承的方法及优缺点总结
May 08 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
vue实现日历表格(element-ui)
Sep 24 Javascript
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 #Javascript
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 #Javascript
JavaScript Event学习第二章 Event浏览器兼容性
Feb 07 #Javascript
JavaScript Event事件学习第一章 Event介绍
Feb 07 #Javascript
jQuery库与其他JS库冲突的解决办法
Feb 07 #Javascript
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 #Javascript
jQuery 学习6 操纵元素显示效果的函数
Feb 07 #Javascript
You might like
星际RPG字典
2020/03/04 星际争霸
PHP+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
zookeeper python接口实例详解
2018/01/18 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
一道Delphi上机题
2012/06/04 面试题
医学生求职自荐信
2013/10/25 职场文书
党校培训自我鉴定范文
2014/04/10 职场文书
诚信贷款承诺书
2014/05/30 职场文书
节水标语大全
2014/06/11 职场文书
作风转变年心得体会
2014/10/22 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
茶花女读书笔记
2015/06/29 职场文书
趣味运动会加油词
2015/07/18 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
解决vue中provide inject的响应式监听
2022/04/19 Vue.js