- 浏览: 457277 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (229)
- gef (1)
- emf (0)
- rcp (2)
- 杂谈 (3)
- draw2d (2)
- xml (1)
- spring (16)
- osgi (1)
- jsp (6)
- hibernate (8)
- j2se (41)
- oracle (25)
- js (23)
- ognl (1)
- struts2 (2)
- webwork (1)
- prototype (1)
- dwr (3)
- struts (7)
- axis2 (3)
- axis1 (6)
- lucene (9)
- pop3 (1)
- aspectj (1)
- 网络协议 (6)
- bat (6)
- Quartz (5)
- jms (3)
- jndi (7)
- 网络爬虫 (7)
- acegi (1)
- linux (5)
- 缓存 (1)
- mysql (1)
- 在使用Java处理图形应用时,经常有人推荐设置 -Djava.awt.headless=true,具体含义和效果查了一下,记录在这里分享 Headless模式是系统的一种配置模式。在该模式下,系统缺少了显示设备、键盘或鼠标。 Headless模式虽然不是我们愿意见到的,但事实上我们却常常需要在该模式下工作,尤其是服务器端程序开发者。因为服务器(如提供Web服务的主机)往往可能缺少前述设备,但又需要使用他们提供的功能,生成相应的数据,以提供给客户端(如浏览器所在的配有相关的显示设备、键盘和鼠标的主 (1)
最新评论
-
hanmiao:
注释掉的那壹行少了壹個斜线,楼主...
servlet导出excel -
天下无贼:
Thread.Interrupt方法,只是通过扔出异常的方式, ...
Java Thread.interrupt 害人! 中断JAVA线程(zz) -
天下无贼:
呵呵,是你自己写错了。
Java Thread.interrupt 害人! 中断JAVA线程(zz) -
MO_ZHUANG_D:
如果是真的就感激不尽了
Axure RP教程 -
小嘴冰凉:
在开始执行的时候,如果是数据库存储,程序会从数据库中查job信 ...
quartz的持久化
事件捕捉(Event Capture)的实现问题
IE的高级事件处理模型的问题
一、事件捕捉(Event Capture)的实现问题
首先在说这件事前,先感谢一下Realazy。
W3C DOM Level2的事件模型规范中,事件在DOM树中的传播过程(从根节点到目标节点)被分为了两个阶段:捕捉(Capture)和冒泡(Bubbling)。下面这个图能大概的说明整个过程:
(from W3C)
如果想创建一个捕捉事件,在支持W3C 事件模型的浏览器中,将addEventListener的第三个参数设为true就好了。例如:
document.getElementById('foo').addEventListener('click',function(){alert('Hello, world!');},true);
前一阵因为想弄懂事件捕捉,所以做了点小实验,分别在Firefox 2、Safari 3 on Windows和Opera 9上实践了事件捕捉(当然,因为IE不支持事件捕捉,所以…),实验的原理见下图:
ID为div1和div2的两个元素都被委派了捕捉阶段的事件处理函数,这样:
当点击#div1(蓝色区域)时,应该会alert出”div1″
当点击#div2(黄色区域)时,应该会先alert出”div1″,再alert出”div2″,因为在事件捕捉阶段,事件是从根元素向下传播的,#div1是#div2的父元素,自然绑定在#div1上的click事件也会先于#div2上的click事件被执行。
然而,以上的设想只试用于Firefox 2和Safari 3 on Windows,在Opera 9中,事情会变成这样:
当点击#div1(蓝色区域)时,什么都不会发生
当点击#div2(黄色区域)时,会alert出”div1″,随后什么都不会再发生
可以看出,在Opera 9中,目标元素(TargetElement)的click事件没有被执行。通过Realazy(orz…)的指点,找到了这篇文章:《Event capture explained》,发现,
来Opera中的实现才是正确的。此文中有一段话如是说:
The DOM spec states that capturing events should not fire on target, because the idea of a capturing event is to detect events before they reach their targets. Because of bugs in Gecko and Safari, web content that is tested mostly with Firefox or other Gecko-based browsers sometimes expects capturing listeners to fire on target. Such content will fail in Opera 7, 8 and current releases of 9 because of its correct implementation of the standard.
大意是说:DOM规范中陈述了捕捉型的事件不应该在目标元素上被执行,因为捕捉型事件的用意就是为了监测到达目标元素之前的事件。Firefox和Safari的实现都是带有bug的。
再来看看W3C的DOM Events规范中的原话:
A capturing EventListener will not be triggered by events dispatched directly to the EventTarget upon which it is registered.
所以,在整个事件传播中,被执行的顺序是:
父元素中所有的捕捉型事件(如果有)自上而下地执行
目标元素的冒泡型事件(如果有)
父元素中所有的冒泡型事件(如果有)自下而上地执行
在了解了这些后,也许还是不要使用事件捕捉为妙,至少暂时不要。
二、IE的高级事件处理模型的问题
重复绑定
IE下没有addEventListener,但是也有自己的attachEvent,即所谓的Microsoft Model。二者的实现基本相同只是attachEvent的第一个参数(事件类型)需要加”on”,而addEventListener不用,另外attachEvent因为不支持事件捕捉,所以也没有第三个参数。
然而,attachEvent还有一个很要命的问题:重复绑定事件。(这是从ppk on JavaScript中学到的)
一个例子:
function sayHello(){
alert('Hello, world!');
}
// W3C Model
$('div1').addEventListener('click', sayHello, false);
$('div1').addEventListener('click', sayHello, false);
// Microsoft Model
$('div1').attachEvent('onclick', sayHello);
$('div1').attachEvent('onclick', sayHello);
在W3C模型中,相同事件处理函数的绑定会被忽略,也就是说第二个$('div1').addEventListener('click', sayHello, false);会被忽略。
而在Microsoft模型中,第二个$('div1').attachEvent('onclick', sayHello);同样会被执行,所以,当你点击#div1的时候,alert框会弹出来两次。更有甚者,在detachEvent时候,也同样要detachEvent两次才能彻底把sayHello从#div1的click事件中删除。
为什么不继续使用alertID()了?
这是因为IE的事件模型的另一个缺陷,在alertID中,使用了this关键字来指代被委派了该事件处理函数的元素,这样,在W3C模型中,alertID中的this指代了#div1或者#div2。
但是在Microsoft模型中,缺少了对this的支持后,this.id就会变为undefined,因为这时候this指代了window对象。
http://www.webjx.com/javascript/jsajax-1375.html
IE的高级事件处理模型的问题
一、事件捕捉(Event Capture)的实现问题
首先在说这件事前,先感谢一下Realazy。
W3C DOM Level2的事件模型规范中,事件在DOM树中的传播过程(从根节点到目标节点)被分为了两个阶段:捕捉(Capture)和冒泡(Bubbling)。下面这个图能大概的说明整个过程:
(from W3C)
如果想创建一个捕捉事件,在支持W3C 事件模型的浏览器中,将addEventListener的第三个参数设为true就好了。例如:
document.getElementById('foo').addEventListener('click',function(){alert('Hello, world!');},true);
前一阵因为想弄懂事件捕捉,所以做了点小实验,分别在Firefox 2、Safari 3 on Windows和Opera 9上实践了事件捕捉(当然,因为IE不支持事件捕捉,所以…),实验的原理见下图:
ID为div1和div2的两个元素都被委派了捕捉阶段的事件处理函数,这样:
当点击#div1(蓝色区域)时,应该会alert出”div1″
当点击#div2(黄色区域)时,应该会先alert出”div1″,再alert出”div2″,因为在事件捕捉阶段,事件是从根元素向下传播的,#div1是#div2的父元素,自然绑定在#div1上的click事件也会先于#div2上的click事件被执行。
然而,以上的设想只试用于Firefox 2和Safari 3 on Windows,在Opera 9中,事情会变成这样:
当点击#div1(蓝色区域)时,什么都不会发生
当点击#div2(黄色区域)时,会alert出”div1″,随后什么都不会再发生
可以看出,在Opera 9中,目标元素(TargetElement)的click事件没有被执行。通过Realazy(orz…)的指点,找到了这篇文章:《Event capture explained》,发现,
来Opera中的实现才是正确的。此文中有一段话如是说:
The DOM spec states that capturing events should not fire on target, because the idea of a capturing event is to detect events before they reach their targets. Because of bugs in Gecko and Safari, web content that is tested mostly with Firefox or other Gecko-based browsers sometimes expects capturing listeners to fire on target. Such content will fail in Opera 7, 8 and current releases of 9 because of its correct implementation of the standard.
大意是说:DOM规范中陈述了捕捉型的事件不应该在目标元素上被执行,因为捕捉型事件的用意就是为了监测到达目标元素之前的事件。Firefox和Safari的实现都是带有bug的。
再来看看W3C的DOM Events规范中的原话:
A capturing EventListener will not be triggered by events dispatched directly to the EventTarget upon which it is registered.
所以,在整个事件传播中,被执行的顺序是:
父元素中所有的捕捉型事件(如果有)自上而下地执行
目标元素的冒泡型事件(如果有)
父元素中所有的冒泡型事件(如果有)自下而上地执行
在了解了这些后,也许还是不要使用事件捕捉为妙,至少暂时不要。
二、IE的高级事件处理模型的问题
重复绑定
IE下没有addEventListener,但是也有自己的attachEvent,即所谓的Microsoft Model。二者的实现基本相同只是attachEvent的第一个参数(事件类型)需要加”on”,而addEventListener不用,另外attachEvent因为不支持事件捕捉,所以也没有第三个参数。
然而,attachEvent还有一个很要命的问题:重复绑定事件。(这是从ppk on JavaScript中学到的)
一个例子:
function sayHello(){
alert('Hello, world!');
}
// W3C Model
$('div1').addEventListener('click', sayHello, false);
$('div1').addEventListener('click', sayHello, false);
// Microsoft Model
$('div1').attachEvent('onclick', sayHello);
$('div1').attachEvent('onclick', sayHello);
在W3C模型中,相同事件处理函数的绑定会被忽略,也就是说第二个$('div1').addEventListener('click', sayHello, false);会被忽略。
而在Microsoft模型中,第二个$('div1').attachEvent('onclick', sayHello);同样会被执行,所以,当你点击#div1的时候,alert框会弹出来两次。更有甚者,在detachEvent时候,也同样要detachEvent两次才能彻底把sayHello从#div1的click事件中删除。
为什么不继续使用alertID()了?
这是因为IE的事件模型的另一个缺陷,在alertID中,使用了this关键字来指代被委派了该事件处理函数的元素,这样,在W3C模型中,alertID中的this指代了#div1或者#div2。
但是在Microsoft模型中,缺少了对this的支持后,this.id就会变为undefined,因为这时候this指代了window对象。
http://www.webjx.com/javascript/jsajax-1375.html
发表评论
-
网页打印问题,打印设置,打印预览,打印分页,纵打,横打及页面的边距
2011-07-27 17:13 23491、控制"纵打"、 横打”和“页面的边距。 ... -
利用Word打印报表(二) ------打开指定word文档并打印
2011-07-27 14:58 1518实例说明 在制作网站时,有时需要打开指定的Word文档并打印该 ... -
利用Word打印报表(三)----在jsp中利用word打印指定格式的会议记录
2011-07-27 14:57 1432在开发网络应用程序时,有时需要对输入的信息按指定的格式进行打印 ... -
JS中match、replace方法中使用正则表达式
2010-04-28 13:56 3626正则表达式由来已久,查找替换功能非常强大,但模板难记复杂。 J ... -
用 Javascript 操作 Cookie
2009-12-10 15:19 960摘要: Cookie 是维护客户端状态的解决方案之一,在大多数 ... -
JQuery
2009-08-31 13:28 982、关于页面元素的引用 通过jquery的$()引用元素包括 ... -
IE和Firefox下event乱谈
2009-07-16 11:20 1150如果在使用javascript的时候涉及到event处 ... -
window.event
2009-07-16 11:08 1060. window.event属性 altKey:alt是否按 ... -
js时间
2009-06-01 14:54 844http://www.my97.net/dp/demo/ -
htmleditor
2009-01-20 13:36 1774新浪博客HtmlEditor在线编辑器(仿OFFICE2007 ... -
tafeltree
2009-01-08 09:51 1131<html> <head> ... -
CSS选择器示例
2008-09-04 11:16 1138Html代码: <html> <head& ... -
JavaScript类
2008-09-04 09:18 1433类是什么? 许多 ... -
javascript event 事件解析
2008-09-03 08:54 1002描述 event代表事件的状态,例如触发event对象的元素、 ... -
用javascript拖动DIV层
2008-09-03 08:44 1885<html> <head> & ... -
javaScript DOM方法与属性摘要
2008-09-01 15:04 9801 createElement(element) 创 ... -
详解javascript类继承机制的原理
2008-09-01 13:21 1190目前 javascript的实现继承方式并不是通过“exten ... -
JavaScript:prototype属性使用说明
2008-08-29 14:22 878prototype 是在 IE 4 及其以后版本引入的一个针对 ... -
js资料站点
2008-08-29 13:41 836http://blog.csdn.net/gotolovo -
JavaScript常用事件
2008-08-27 09:59 2150onblur:(使用在表单元素中,当元素失去焦点的时候执行 ...
相关推荐
事件捕捉(Event Capture)的实现问题 W3C DOM Level2的事件模型规范中,事件在DOM树中的传播过程(从根节点到目标节点)被分为了两个阶段:捕捉(Capture)和冒泡(Bubbling)。下面这个图能大概的说明整个过程: ...
**手写DOM事件模型** 在Web开发中,DOM(Document Object Model)事件模型是JavaScript与网页交互的关键。它允许我们监听、处理和触发各种用户或浏览器产生的事件,如点击、鼠标移动、键盘输入等。本篇文章将深入...
DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM...
JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源...
DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件...
"DOM文档对象模型中文手册"是学习和查询DOM相关知识的重要资源,提供了关于DOM节点操作、事件处理、选择和遍历元素等方面的详细解释和示例。CodePub.chm格式的文件通常是一个帮助文档,用户可以通过它快速查找DOM...
**DOM对象模型** DOM,全称为“Document Object Model”,即文档对象模型,是W3C组织定义的一个标准,用于表示HTML或XML文档的一种结构化表示方式。它将文档解析为一个由节点组成的树形结构,使得JavaScript或其他...
DOM文档对象模型介绍,DOM文档对象模型介绍
9. **DOM API**: `DOM Level 1`, `DOM Level 2`, `DOM Level 3`分别定义了一系列API,涵盖了文档的加载与交互、样式操作、事件处理等多个方面,提供了丰富的功能供开发者使用。 10. **跨浏览器兼容性**: 不同的...
通过这种技术,我们可以对目标网页的DOM事件进行断点调试,从而获取更多关于事件触发和处理的信息。在本文中,我们将详细阐述 DOM 事件断点调试的原理和应用。 什么是 DOM 事件断点调试? DOM 事件断点调试是指在 ...
5. **事件处理**:解释DOM中的事件模型,如何绑定和触发事件,以及如何使用事件监听器处理事件。 6. **遍历和搜索**:介绍遍历DOM树的方法,如深度优先、广度优先搜索,以及如何使用XPath或CSS选择器来定位特定的...
以上内容中包含了对DOM中各种对象的属性和方法的使用,BOM模型的核心对象window及其常用方法,JavaScript中的事件处理机制,包括事件是如何产生的、事件对象的特性以及事件冒泡现象,以及面向对象编程的基础知识,...
DOM Level 2引入了完整的事件模型,支持捕获和冒泡两种事件流,并且DOM Level 3继续沿用了这个模型。然而,不同的浏览器在实现上存在差异,比如IE有一个专有的事件模型,与DOM标准不同。 在JavaScript中,事件接口...
### JavaScript文档对象模型(DOM)详解 #### 一、引言 文档对象模型(Document Object Model,简称DOM),是W3C为了统一不同浏览器环境下的文档处理方式而制定的一套标准。这一标准的诞生,旨在解决早期浏览器混战...
5. **事件处理**:DOM支持事件监听和处理,如`addEventListener()`和`removeEventListener()`,用于添加和移除事件处理器,以及`dispatchEvent()`用于触发事件。 6. **DOM Level和版本**:DOM有多个级别,包括核心...
### BOM和DOM模型 #### 一、BOM与DOM概览 在Web开发中,BOM(Browser Object Model)和DOM(Document Object Model)是非常重要的两个概念,它们构成了前端JavaScript操作网页的基础。 ##### BOM:浏览器对象模型...
DOM0级事件处理是最基础的JavaScript事件处理模型,它允许开发者为DOM元素绑定事件处理函数。在这一级别中,事件处理函数是作为DOM元素的一个私有属性存在的。这意味着,如果尝试为同一元素绑定同一种类型的多个事件...
总的来说,“xmldom对象模型手册”应该包含了关于创建、遍历、修改和操作XML文档的详细指南,这对于需要处理XML数据的前端开发者或是需要构建动态Web应用程序的人来说是非常有价值的参考资料。通过学习这个手册,你...