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

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

赞 (0)

相关推荐

  • javascript事件模型实例分析

    本文实例讲述了javascript事件模型的用法.分享给大家供大家参考.具体分析如下: 一.事件模型 冒泡型事件(Bubbling):事件由叶子节点沿祖先节点一直向上传递到根节点 捕获型事件(Capturing):由DOM树最顶元素一直到最精确的元素,与冒泡型事件相反 DOM标准事件模型:DOM标准既支持冒泡型事件,也支持捕获型事件,可以说是两者的结合体,首先是捕获型,接着冒泡传递 二.事件对象 在IE浏览器中事件对象是window的一个属性,在DOM标准中,event必须作为唯一的参数传给事件

  • JavaScript Event学习第四章 传统的事件注册模型

    在最古老的JavaScript浏览器里注册事件只能通过内联模式.自从DHTML从根本上改变了你操作页面的方法,事件的注册就必须有扩展性而且要有很强的适应性.所以就必须有相应的事件模型.Netscape在第三代浏览器中就开始了,IE在第四代浏览器开始. 因为Netscape 3就开始支持这种新的事件注册模型,在浏览器战争前就是事实上的标准.所以微软不得不也是最后一次为了网上那些数不清的使用了Netscape事件处理模型的页面在兼容性上做出了让步. 所以这两个浏览器,事实上也是所有的浏览器都支持下面

  • 关于javascript DOM事件模型的两件事

    关于javascript DOM事件模型的两件事

    事件捕捉(Event Capture)的实现问题 W3C DOM Level2的事件模型规范中,事件在DOM树中的传播过程(从根节点到目标节点)被分为了两个阶段:捕捉(Capture)和冒泡(Bubbling).下面这个图能大概的说明整个过程: (from W3C) 如果想创建一个捕捉事件,在支持W3C 事件模型的浏览器中,将addEventListener的第三个参数设为true就好了.例如: 复制代码 代码如下: document.getElementById('foo').addEvent

  • javascript 传统事件模型构造的事件监听器实现代码

    代码如下: 复制代码 代码如下: var br={}; br.eventRouter = {}; br.eventRouter.addListen = function(el,eventType,func){ if(!el.eventObjs){ el.eventObjs = {}; } if(!el.eventObjs[eventType]){ el.eventObjs[eventType]=[]; br.eventRouter.bindListen(el,eventType); } el.e

  • Javascript基础知识（一）核心基础语法与事件模型

    一.Javascript核心基础语法 1.Javascript是一门增加交互效果的编程语言,它最初由网景公司发明,最后提交给ECMA(欧洲计算机制造商协会),ECMA将Javascript标准化,其命名为Javascript. 2.Javascript是一门解释性语言,无需编译就可以直接在浏览器下运行. 3.Javascript的用途? 1.可以控制网页中所有元素,增加.删除.修改元素的属性. 2.可以在html中放入动态文本. 3.响应用户在使用网页时产生的事件. 4.校验用户输入的数据. 5

  • javascript事件模型代码

    本节稍稍深入地讨论关于事件处理的话题,如果你对模式.闭包和面向对象等概念还不太理解,不妨暂且等阅读完相关内容之后再回过头来阅读它,相信你会有很大收获. 1 事件处理模式 在程序设计领域,"事件处理"是一种模式,当一个对象受外部影响而改变状态时,通过消息的方式将这个状态改变通知给这个对象或者相关联的某个对象,让它执行对应的动作,这就是事件处理的基本原理.负责通知状态改变的对象被称作"消息",而执行响应动作的属性则被称作"事件代理".        

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

    W3C和微软都着力于发展自己的事件注册模型来取代Netscape的传统模型.虽然对于微软的模型我不是很感冒,但是w3c的还是不错的,除了这个鼠标定位 的问题.不过现在只有小部分浏览器支持. W3C W3C的DOM层面事件规范注意到了传统模式的问题.他对于你想在一个元素上绑定多个事件提供了一个很好的解决办法. W3C事件注册模型的关键就是addEventListener().你给他三个参数:事件类型,要执行的函数和一个布尔值(true或者false)我一会再解释.把我们熟知的doSomething

  • JavaScript Event学习第三章 早期的事件处理程序

    这些古老的浏览器只支持一种注册事件处理程序的方法,这个方法是Netscape发明的.因为Netscape先发制人,所以如果微软也想做支持JavaScript事件的浏览器就得跟着Netscape走,所以这里没有兼容性的问题.所以这种模式在任何支持JavaScript的浏览器都能运行---除了Mac上的IE3,他根本就不支持事件. 注册事件处理程序 在内联式的事件注册模型中,事件处理程序就像是一个HTML元素的属性,比如: <A HREF="somewhere.html" onCli

  • JavaScript Event学习第六章 事件的访问

    现在我们已经注册了事件处理程序,对于事件我们还想更深入的了解.我们想知道事件发生时候的鼠标位置,我们想知道用户按下了哪些键.这些都是可能的,虽然这部分有很多烦人的浏览器兼容性问题.(这里可以快速查看浏览器兼容性列表). 要读出事件的属性,必须要先能访问到事件. 浏览器兼容性 站在浏览器战争的角度看,Netscape实现了一个访问模型(后来被W3C做借鉴)和很多的事件属性,同时微软也做了同样的事情.当然这两种模型是完全不兼容的.但是就像我们再简介里面说的,如果 复制代码 代码如下: if (W3C

  • JavaScript Event学习第七章 事件属性

    当我们想去读一读关于Event的一些资料时,常常会湮没在大量的属性里面,这些属性其中的大多数不能良好的运行在大多数的浏览器.这里有event的兼容性列表. 我不打算给这些属性列个表,因为那些情况实在是太让人晕头了,而且对你的学习也不会有一点点的帮助.在写5段代码前我先要问关于浏览器的5个问题. 1.event的类型(type)是什么? 2.哪一个HTML元素是event的目标呢? 3.哪些键在event发生时被按下了? 4.哪个鼠标键在Event发生时被按下了? 5.在Event发生时鼠标的位置

  • JavaScript DOM 学习第五章 表单简介

    因为每一个表单的检测项都不同,所以我也不能给你一个万能的代码.你需要用我在这一章介绍的这些元素构建自己的检测函数.我在后面一张还有一个例子,你也可以参考. 在这一章我会首先讨论一下用JavaScript来检测表单的局限性,然后会解释一下提交时间处理程序,然后是表单本身的一些方法和属性.最后就是如何访问表单元素. 这里还有一篇Jeff Howden的介绍表单的使用错误和解决办法.Forms & JavaScript Living Together in Harmony局限性 首先,你需要了解当用户

  • JavaScript Event学习第十一章 按键的检测

    JavaScript Event学习第十一章 按键的检测

    第一个问题是对于按键事件来说根本就没有标准,按照规范说的:包含键盘等输入设备的事件模型会在以后的DOM规范中作出解释. 正如我们了解到的,浏览器在最开始设计的时候并没有一个标准,大家都像做实验似的,最后的成品虽然是有用的,但是肯定造成了兼容性的问题.按键问题也不例外:这里有两个属性能检测到用户按下了什么键,虽然有足够的理由为什么需要两个属性,但是依然并不是所有的浏览器都支持. 另外,在keypress与keydown和keyup之间还有一些很重要的区别. 最后就是windows和mac的区别了,

  • JavaScript Event学习第八章 事件的顺序

    基本问题很简单.假设你的一个元素包含在另外一个元素中. 复制代码 代码如下: ----------------------------------- | element1 | | ------------------------- | | |element2 | | | ------------------------- | ----------------------------------- 这两个元素都有onclick事件处理程序.如果用户在element2上面单击那么在元素2和元素1上都

  • JavaScript DOM 学习总结(五)

    1.DOM简介. 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构,即节点树.通过DOM,JS可创建动态的HTML,可以使网页显示动态效果并实现与用户的交互功能.JS能够改变页面中所有的HTML元素.属性和CSS样式,并对页面中所有事件做出响应.所以学习JS的起点就是处理网页,处理网页就需要使用DOM进行操作. 2.DOM获取元素. JS要想操作H

  • JavaScript Event学习第二章 Event浏览器兼容性

    在这里提出的事件,当他们发生在一个确定的HTML元素上的时候,他们的名字能够被大多数的浏览器所识别.也就是说,浏览器会查找你为这个HTML元素所注册的事件处理程序的脚本,而且会被立即执行.      一开始只有为数很少的一些事件.这些事件在几乎所有的JavaScript浏览器都能运行,即使是那些非常古老的.需要注意的是那些早期的事件只能工作在链接或者表单上,有时候也能运行在整个窗口上,但是其他的大多数HTML元素不行.      时代变迁,很多新的事件也给大家介绍过了.第四代浏览器和更高级的浏览

随机推荐