测试代码:
分别在嵌套的元素body,div#level1,div#level2,div#level3上附加事件,仅在chrome中测试通过。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#level1{width:500px;height:300px;background-color:#aabb11}
#level2{width:300px;height:200px;background-color:#aabb88}
#level3{width:100px;height:100px;background-color:#aabbee}
</style>
</head>
<body>
<div id="level1">
<div id="level2">
<div id="level3">
</div>
</div>
</div>
<script>
var $ = function(el) {
return new _$(el);
};
var _$ = function(el) {
this.el = (el && el.nodeType == 1)? el: document;
};
_$.prototype = {
addEvent : function(type, fn, capture) {
var el = this.el;
if (window.addEventListener) {
el.addEventListener(type, function(e) {
fn.call(el, e);
}, capture);
} else if (window.attachEvent) {
el.attachEvent("on" + type, function(e) {
fn.call(el, e);
});
}
return this;
},
trigger : function(eventname) {
var el = this.el;
if (document.createEvent) { // DOM Level 2 standard
//Events,HTMLEvents,UIEevents,MouseEvents,MutationEvents
var evt = document.createEvent("Events");
//initEvent,initUIEvent,initMouseEvent,initMutationEvent
evt.initEvent(eventname, true, true);
el.dispatchEvent(evt);
} else if (el.fireEvent) { // IE
el.fireEvent('on'+eventname);
}
return this;
}
};
function stopEvent(event){
//event.preventDefault();
//event.stopPropagation();
};
//element.addEventListener(event, function, useCapture)
//true - 事件句柄在捕获阶段执行;
//false- false- 默认。事件句柄在冒泡阶段执行;
//true:由外到内触发;false:由内向外触发。
var useCapture = false;
$(document.body).addEvent("custom1",function(e){console.log("body-custom1");stopEvent(e);},useCapture)
.addEvent("click",function(e){console.log("body");stopEvent(e);},useCapture);
var level1 = document.getElementById("level1");
$(level1).addEvent("custom1",function(e){console.log("level1-custom1");stopEvent(e);},useCapture)
.addEvent("click",function(e){console.log("level1");stopEvent(e);},useCapture);
var level2 = document.getElementById("level2");
$(level2).addEvent("click",function(e){console.log("level2");stopEvent(e);},useCapture);
var level3 = document.getElementById("level3");
$(level3).addEvent("click",function(e){console.log("level3");stopEvent(e);},useCapture); $(level3).trigger("custom1").trigger("click");
</script>
</body>
</html>

运行结果(useCapture=true时,输出顺序相反):

level1-custom1
body-custom1
level3
level2
level1
body

div#level3的Event Listeners(勾选Ancestors,包含自身和祖先的事件):

不勾选Ancestors,仅自身的事件:

Javascript addEventListener dispatchEvent的更多相关文章

  1. JavaScript addEventListener 第三个参数

    先看一个完整的演示页面代码. Code <!DOCTYPE html> <html lang="zh-CN"> <head> <meta ...

  2. javascript addEventListener方法

    addEventListener是一个侦听事件并处理相应的函数. DOM方法 addEventListener() 和 removeEventListener()是用来分配和删除事件的函数. 这两个方 ...

  3. 白鹭引擎 - 事件机制 ( Event, addEventListener, dispatchEvent )

    1, 自定义事件, MyEvent class MyEvent extends egret.Event { /** * 一般会定义一个 DATA 字段作为事件 * 绑定事件监听器时, 一般用 类.DA ...

  4. javascript:addEventListener

    addEventListener 用于注册事件处理程序,IE 中为 attachEvent,我们为什么讲 addEventListener 而不讲 attachEvent 呢?一来 attachEve ...

  5. JavaScript addEventListener()事件监听方法

    addEventListener()方法将事件处理程序附加到指定的元素. addEventListener()方法将事件处理程序附加到元素,而不覆盖现有的事件处理程序. 您可以向一个元素添加许多事件处 ...

  6. javascript -- addEventListener()和removeEventListener

    addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作.所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件 ...

  7. EventEmitter:从命令式 JavaScript class 到声明函数式的华丽转身

    新书终于截稿,今天稍有空闲,为大家奉献一篇关于 JavaScript 语言风格的文章,主角是函数声明式. 灵活的 JavaScript 及其 multiparadigm 相信"函数式&quo ...

  8. 深入学习jQuery事件绑定

    × 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...

  9. event.srcElement ,event.fromElement,event.toElement

    自然,我们都习惯了 IE,在 IE 中要在函数中获得各事件对象很容易,直接用 event.event.srcElemtn.event.fromElement.event.toElement 就行了.在 ...

随机推荐

  1. 解决NDK开发中Eclipse报错“Unresolved inclusion jni.h”的最终方法

    http://blog.csdn.net/zhubin215130/article/details/39347873

  2. JobScheduler

    任务写在JobService中 public class TestJobService extends JobService { private static final String TAG = & ...

  3. cmd下运行PowerShell命令

    PowerShell -Command "& {Get-EventLog -LogName security}"

  4. 通过RDB还原用户误删除的邮件

    1.在任意一台邮箱服务器上新建RDB数据库目录:C:\rdb01 2.使用Windows Server Backup还原已备份的邮件数据(mbdb02)库到 C:\rdb01 目录下 3.创建RDB数 ...

  5. Orchard官方文档

    开始使用 安装Orchard 通过Orchard zip文件安装 使用WebMatrix开发Orchard Dashboard总览 创建你的第一个Orchard站点 导航和菜单 添加博客 新增管理媒体 ...

  6. 会吓人的概念证明病毒: Chameleon

    近期有这么一条新闻指出,有一对家长发现,黑客入侵了他们为10个月女儿所准备的婴儿监视器(baby monitor).该黑客除了远程操控该监视器的录像角度,还大声对着小孩喊叫.婴儿的爸爸冲进女儿房间后, ...

  7. boost 线程、互斥体、条件变量

    1.任何技术都是针对特定场景设计的,也就是说,为了解决某个问题而设计的. 2.考虑下面一种场景:一个小旅馆,只有一个卫生间,有清洁人员,店主人,和旅客.卫生间用完之后,就会自动锁闭,必须取钥匙,才能进 ...

  8. cdoj 1131 男神的礼物 区间dp

    男神的礼物 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/1131 Descr ...

  9. 安卓开发之使用viewpager+fragment实现滚动tab页

    闲着.用viewpager+fragment实现了个滚动tab..轻拍,以后会陆续发先小东西出来..爱分享,才快乐.demo见附件.. package com.example.demo; import ...

  10. TP复习16

    'APP_GROUP_LIST' => 'Home,Admin', //项目分组设定'DEFAULT_GROUP' => 'Home', //默认分组 开分组复制上面 AjaxReturn