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 相关文章推荐
js继承的实现代码
Aug 05 Javascript
Jquery中dialog属性小记
Sep 03 Javascript
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
js 金额文本框实现代码
Feb 14 Javascript
JS中操作JSON总结
Dec 06 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
vue3.0 的 Composition API 的使用示例
Oct 26 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
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
javascript中sort()的用法实例分析
2015/01/30 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
python实现翻译word表格小程序
2020/02/27 Python
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
酒店管理专业自荐信
2014/05/23 职场文书
师范类求职信
2014/06/21 职场文书
授权委托书格式范文
2014/08/02 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
个人工作总结范文2014
2014/11/07 职场文书
《青山不老》教学反思
2016/02/22 职场文书
创业计划书之面包店
2019/09/12 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python