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 toFixed() 方法
Apr 15 Javascript
浅析js封装和作用域
Jul 09 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 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 curl 伪造IP来源的实例代码
2012/11/01 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
JavaScript中的this机制
2016/01/30 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
python基于socket实现网络广播的方法
2015/04/29 Python
Python的Django框架中的数据库配置指南
2015/07/17 Python
python编程线性回归代码示例
2017/12/07 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
浅谈python多线程和多线程变量共享问题介绍
2020/04/17 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
keras输出预测值和真实值方式
2020/06/27 Python
Python字典dict常用方法函数实例
2020/11/09 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
MYSQL基础面试题
2012/05/13 面试题
妇产医师自荐信
2014/01/29 职场文书
土地租赁协议书
2015/01/29 职场文书
员工工作表现自我评价
2015/03/06 职场文书
病危通知书样本
2015/04/17 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
比较几种Redis集群方案
2021/06/21 Redis
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL
vue动态绑定style样式
2022/04/20 Vue.js
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技