编程 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 相关文章推荐

学习YUI.Ext 第四天--对话框Dialog的使用

Mar 10 Javascript

使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法

Apr 07 Javascript

jQuery插件开发全解析

Oct 10 Javascript

jQuery拖动div、移动div、弹出层实现原理及示例

Apr 08 Javascript

Hallo.js基于jQuery UI所见即所得的Web编辑器

Jan 26 Javascript

checkbox 选中一个另一个checkbox也会选中的实现代码

Jul 09 Javascript

将json转换成struts参数的方法

Nov 08 Javascript

js常用的继承--组合式继承

Mar 06 Javascript

protractor的安装与基本使用教程

Jul 07 Javascript

Vue 中使用lodash对事件进行防抖和节流操作

Jul 26 Javascript

antd日期选择器禁止选择当天之前的时间操作

Oct 29 Javascript

解决VueCil代理本地proxytable无效报错404的问题

Nov 07 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