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 Event学习第八章 事件的顺序
Feb 07 Javascript
jQuery的链式调用浅析
Dec 03 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
微信小程序表单验证功能完整实例
Dec 01 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
原生js实现二级联动菜单
Nov 27 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
终于听上了直流胆调频
2021/03/02 无线电
推荐php模板技术[转]
2007/01/04 PHP
PHP 5.0对象模型深度探索之对象复制
2008/03/27 PHP
php flush类输出缓冲剖析
2008/10/19 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
javascript天然的迭代器
2010/10/29 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
python实现的各种排序算法代码
2013/03/04 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
网络教育毕业生自我鉴定
2013/10/10 职场文书
工作表扬信
2015/01/17 职场文书