DOM事件模型的两件事(1)

果粉爱

果粉爱

2016-02-19 14:09

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的DOM事件模型的两件事(1)教程,一起来看看吧!超容易上手~

  事件捕捉(EventCapture)的实现问题
  
  IE的高级事件处理模型的问题
  
  一、事件捕捉(EventCapture)的实现问题
  
  首先在说这件事前,先感谢一下Realazy。
  
  W3CDOMLevel2的事件模型规范中,事件在DOM树中的传播过程(从根节点到目标节点)被分为了两个阶段:捕捉(Capture)和冒泡(Bubbling)。下面这个图能大概的说明整个过程:
  
  (fromW3C)
  
  如果想创建一个捕捉事件,在支持W3C事件模型的浏览器中,将addEventListener的第三个参数设为true就好了。例如:
  
  document.getElementById('foo').addEventListener('click',function(){alert('Hello,world!');},true);
  
  前一阵因为想弄懂事件捕捉,所以做了点小实验,分别在Firefox2、Safari3onWindows和Opera9上实践了事件捕捉(当然,因为IE不支持事件捕捉,所以),实验的原理见下图:
  
  ID为div1和div2的两个元素都被委派了捕捉阶段的事件处理函数,这样:
  
  当点击#div1(蓝色区域)时,应该会alert出div1″
  
  当点击#div2(黄色区域)时,应该会先alert出div1″,再alert出div2″,因为在事件捕捉阶段,事件是从根元素向下传播的,#div1是#div2的父元素,自然绑定在#div1上的click事件也会先于#div2上的click事件被执行。
  
  然而,以上的设想只试用于Firefox2和Safari3onWindows,在Opera9中,事情会变成这样:
  
  当点击#div1(蓝色区域)时,什么都不会发生
  
  当点击#div2(黄色区域)时,会alert出div1″,随后什么都不会再发生
  
  可以看出,在Opera9中,目标元素(TargetElement)的click事件没有被执行。通过Realazy(orz)的指点,找到了这篇文章:《Eventcaptureexplained》,发现,
  
  来Opera中的实现才是正确的。此文中有一段话如是说:
  
  TheDOMspecstatesthatcapturingeventsshouldnotfireontarget,becausetheideaofacapturingeventistodetecteventsbeforetheyreachtheirtargets.BecauseofbugsinGeckoandSafari,webcontentthatistestedmostlywithFirefoxorotherGecko-basedbrowserssometimesexpectscapturinglistenerstofireontarget.SuchcontentwillfailinOpera7,8andcurrentreleasesof9becauseofitscorrectimplementationofthestandard.
  
  大意是说:DOM规范中陈述了捕捉型的事件不应该在目标元素上被执行,因为捕捉型事件的用意就是为了监测到达目标元素之前的事件。Firefox和Safari的实现都是带有bug的。
  
  再来看看W3C的DOMEvents规范中的原话:
  
  AcapturingEventListenerwillnotbetriggeredbyeventsdispatcheddirectlytotheEventTargetuponwhichitisregistered.
  
  所以,在整个事件传播中,被执行的顺序是:
  
  父元素中所有的捕捉型事件(如果有)自上而下地执行
  
  目标元素的冒泡型事件(如果有)
  
  父元素中所有的冒泡型事件(如果有)自下而上地执行
  
  在了解了这些后,也许还是不要使用事件捕捉为妙,至少暂时不要。
  
 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

DOM事件模型的两件事(1)

Web开发
DOM事件模型的两件事(1)

DOM事件模型的两件事(2)

Web开发
DOM事件模型的两件事(2)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

关于DOM事件模型的两件事

Web开发
关于DOM事件模型的两件事

必须警惕的孕前两件事

女人 孕前
必须警惕的孕前两件事

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

不要给婴儿做的两件事

新生儿护理 新生儿 新生儿呵护
不要给婴儿做的两件事

想要顺产必做的两件事

怀孕
想要顺产必做的两件事

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

用Word文本框进行排版的四个妙法

用Word文本框进行排版的四个妙法

AJAXDOM的操作方法

AJAXDOM的操作方法
下拉加载更多内容 ↓