编程 Javascript

关于javascript event flow 的一个bug详解

Posted in Javascript onSeptember 17, 2013

我最近调netsurf也遇到一个相关的bug ： alert() 被调了两次。html 代码：

<html>
<head>
<title>alert onclick example</title>
<script type="text/javascript">
function causealert()
{
var txt = document.getElementById("p1").textContent;
alert(txt);
}
</script>
</head>
<body>
<div style="border: 1px solid red">
<p id="p1">First line of paragraph.<br /></p>
</div><br />
<button id="button1" >add another textNode.</button>
<script>
var Button1 = document.getElementById("button1");
/*var Button1Click = function() { alert(1); };    
Button1.addEventListener("click", Button1Click, false);*/
Button1.onclick = causealert;
</script>
</body>
</html>

通过gdb，定位到是_dom_node_dispatch_event()里面的问题：

   /* The capture phase */ for (targetnr = ntargets; targetnr > 0; --targetnr)...
/* Bubbling phase */
 evt->phase = DOM_BUBBLING_PHASE;
 for (targetnr = 0; targetnr < ntargets; ++targetnr)

事件流是这样的： p1(root)-->p2-->... --> pm --> T (capturing phase), T (target phase), T--> pm --> ... --> p1 (bubbling phase).

规范规定capturing 和bubbling 只能选其一，代码中在 js_dom_event_add_listener()是选capturing。因此就解释了为什么alert 被执行两回了。

修改：根据DOM 3 规范，把上面的0改成1就行了。

关于javascript event flow 的一个bug详解

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

html下载本地

Jun 19 Javascript

清除网页历史记录，屏蔽后退按钮!

Dec 22 Javascript

js正文内容高亮效果的实现方法

Jun 30 Javascript

jquery解析json格式数据的方法(对象、字符串)

Nov 24 Javascript

批量下载对路网图片并生成html的实现方法

Jun 07 Javascript

jQuery的each循环用法简单示例

Jun 12 Javascript

JS解析url查询参数的简单代码

Aug 06 Javascript

Vue.js 表单控件操作小结

Mar 29 Javascript

微信小程序签到功能

Oct 31 Javascript

JavaScript遍历查找数组中最大值与最小值的方法示例

May 24 Javascript

解决微信浏览器缓存站点入口文件(IIS部署Vue项目)

Jun 17 Javascript

vue 清空input标签中file的值操作

Jul 21 Javascript

Node.js开发指南中的简单实例(mysql版)

Sep 17 #Javascript

JavaScript中为什么null==0为false而null大于=0为true(个人研究)

Sep 16 #Javascript

判断一个变量是数组Array类型的方法

Sep 16 #Javascript

jquery实现div阴影效果示例代码

Sep 16 #Javascript

使用ImageMagick进行图片缩放、合成与裁剪(js+python)

Sep 16 #Javascript

document.documentElement和document.body区别介绍

Sep 16 #Javascript

使用js在页面中绘制表格核心代码

Sep 16 #Javascript