关于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 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
javascript 清空form表单中某种元素的值
Dec 26 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
详解AngularJS的通信机制
Jun 18 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
js校验开始时间和结束时间
May 26 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
You might like
php购物网站支付paypal使用方法
2010/11/28 PHP
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
python开发中module模块用法实例分析
2015/11/12 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
python实现简单的tcp 文件下载
2020/09/16 Python
Python 使用office365邮箱的示例
2020/10/29 Python
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
什么是设计模式
2012/06/17 面试题
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
教师自我评价范例
2013/09/24 职场文书
孝老爱亲模范事迹
2014/01/24 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
护士先进个人总结
2015/02/13 职场文书