测试代码：
分别在嵌套的元素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. 常见的Unix指令

    ls -1 列出当前目录下的所有内容(文件/文件夹) pwd 显示当前操作的目录 cd   改变当前操作的目录 who 显示当前用户 clear 清屏 mkdir 新建一个目录 touch 新建一个文 ...

  2. DELPHI下读取与设置系统时钟

    在DELPHI下读取与设置系统时钟 很多朋友都想在自己的程序中显示系统时间 这在DELPHI中十分容易 利用DateToStr(Date)及TimeToStr(Time)函数即可实现. 二者的函数原型 ...

  3. 【M11】禁止异常流出析构方法之外

    1.在两种情况下,调用析构方法:a.在正常状态下被销毁,栈上的对象离开作用域或者堆上的对象执行delete:b.抛出异常,堆栈回滚,栈上已经构造好的对象,也就是抛出异常之前的代码,自动调用析构方法.注 ...

  4. ReactNative学习实践--动画初探之加载动画

    学习和实践react已经有一段时间了,在经历了从最初的彷徨到解决痛点时的兴奋,再到不断实践后遭遇问题时的苦闷,确实被这一种新的思维方式和开发模式所折服,react不是万能的,在很多场景下滥用反而会适得 ...

  5. Oracle数据库备份与恢复的常用方法

    Oracle数据库有三种常用的备份方法,分别是导出/导入(EXP/IMP).热备份和冷备份.导出/导入备份是一种逻辑备份,相对于导出/导入来说,热备份.冷备份是一种物理备份. 导出/导入(Export ...

  6. asmack

    https://github.com/zhuqizhi/tlbs1409 https://github.com/maxting/IM_Project150126 https://github.com/ ...

  7. iOS开发——UI篇Swift篇&UITextView

    UITextView 一:UITextView使用及其属性的设置 titleLabel.text = titleString //创建UITextView对象 textView = UITextVie ...

  8. purge

    RR级别 mysql V5.6 debug ; 测试1 会话1: mysql)); Query OK, rows affected (0.04 sec) mysql,"a"); Q ...

  9. Linux下的Libsvm使用历程录

    原文:http://blog.csdn.net/meredith_leaf/article/details/6714144 Linux下的Libsvm使用历程录 首先下载Libsvm.Python和G ...

  10. ORM框架-VB/C#.Net实体代码生成工具(EntitysCodeGenerate)【ECG】4.5

    摘要:VB/C#.Net实体代码生成工具(EntitysCodeGenerate)[ECG]是一款专门为.Net数据库程序开发量身定做的(ORM框架)代码生成工具,所生成的程序代码基于OO.ADO.N ...