测试代码：
分别在嵌套的元素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. 理解Web标准（网站标准）

    我觉得一名Web前端应该好好理解Web标准到底是什么,为什么要在我们的实际实践中遵循Web标准. 什么是Web标准.百度百科的解释是: WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分 ...

  2. VK Cup 2015 - Round 2 (unofficial online mirror, Div. 1 only) E. Correcting Mistakes 水题

    E. Correcting Mistakes Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/problemset ...

  3. CSS定位规则之BFC 你居然一直不知道的东西！！！！！

    相关文档: http://blog.sina.com.cn/s/blog_877284510101jo5d.html http://www.cnblogs.com/dojo-lzz/p/3999013 ...

  4. Android应用增量更新

    Original:https://github.com/cundong/SmartAppUpdates Backup:https://github.com/eltld/SmartAppUpdates

  5. iOS开发——多线程OC篇&多线程详解

    多线程详解 前面介绍了多线程的各种方式及其使用,这里补一点关于多线程的概念及相关技巧与使用,相信前面不懂的地方看了这里之后你就对多线程基本上没有什么问题了! 1——首先ios开发多线程中必须了解的概念 ...

  6. 激活office 2010

    在激活office 2010版本时有的同学可能会用到“mini-KMS_Activator”这个工具,其实这个工具激活成功率并不算高,我就没激活成功.然后就是了另一款自动激活工具“Office 201 ...

  7. RAID设备

    RAID(Redundant Array of Independent Disk),独立冗余磁盘阵列(通常简称磁盘阵列).磁盘阵列的实质是将多个磁盘通过RAID控制器组合在一起,形成一个新的磁盘.这个 ...

  8. Golang学习 - bytes 包

    ------------------------------------------------------------ 对于传入 []byte 的函数,都不会修改传入的参数,返回值要么是参数的副本, ...

  9. maven-使用assembly自定义打包

    用maven管理项目引用依赖很方便,但是打包的时候如果是web包还好,会直接把依赖的jar包打到lib目录中,如果是jar包的话,依赖默认是不打入进去的 这样如果运行环境中没有依赖的jar包,就麻烦了 ...

  10. C语言第七节流程控制

    流程控制 顺序结构:默认的流程结构.按照书写顺序执行每一条语句. 选择结构:对给定的条件进行判断,再根据判断结果来决定执行哪一段代码. 循环结构:在给定条件成立的情况下,反复执行某一段代码.     ...