JS入门

eventPhase确定事件流阶段

字号+ 作者: 来源: 2014-11-16 22:15 我要评论( )

事件对象的eventPhase属性,可以用来确定事件当前正位于事件流的哪个阶段。如果是在捕获阶段调用的事件处理程序,那么eventPhase等于1;如果事件处理程序位于目标对象上,则eventPhase等于2;如果是在冒泡阶段调用的事件处理程序,eventPhase等于3。这里要注意的是,尽管“处于目标”发生在冒泡阶段,但eventPhase仍然一直等于2。来看下面的例子:

var btn = document.getElementById("myBtn");
btn.onclick = function (event) {
 alert(event.eventPhase);  //2
};
document.body.addEventListener("click", function (event) {
 alert(event.eventPhase);  //1
}, true);
document.body.onclick = function (event) {
 alert(event.eventPhase);  //3
};

当单击这个例子中的按钮时,首先执行的事件处理程序是在捕获阶段触发的添加到document.body中的那一个,结果会弹出一个警告框显示表示eventPhase的1。接着,会触发在按钮上注册的事件处理程序,此时的eventPhase值为2。最后一个被触发的事件处理程序,是在冒泡阶段执行的添加到documnet.body上的那一个,显示eventPhase的值为3。而当eventPhase等于2时,this、target和currentTarget始终是相等的。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 使用javascript生成的植物显示过程特效

    使用javascript生成的植物显示过程特效

    2015-06-06 16:26

  • javascript 杂谈之哪种写法你更喜欢?

    javascript 杂谈之哪种写法你更喜欢?

    2014-11-16 22:15

  • 面向对象的JavaScript

    面向对象的JavaScript

    2014-11-16 22:15

  • Javascript模板引擎性能对比及几点优化

    Javascript模板引擎性能对比及几点优化

    2014-11-16 22:15

网友点评
t