测试代码：
分别在嵌套的元素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. 习总强调网络安全 ，咱们国产SSL证书必须加快普及速度

    上海(2014 年 2 月 27 日)—— 央视新闻联播 27 日报道中央网络安全和信息化领导小组于当日成立的消息及习总在该小组首次会议上的重要讲话.据悉,该小组由习总任小组长,李克强.刘云山任副组长 ...

  2. IOS学习经验总结--来自知乎网友

    转自知乎:http://www.zhihu.com/question/20016551 我当时刚学iOS开发的时候一样的感觉 总想知道原理 内部怎么回事 感觉在像在雾里但是iOS开发就是这样 他是封闭 ...

  3. linux系统命令解析(0基础篇)

    经常使用命令 ctrl+W+T    当进入gvim文档编辑界面后,假设是C文件,能够列出当前文件里的全部函数. Shift+*    当进入gvim文档编辑页面,能够搜索当前keyword. ech ...

  4. 【6】连续序列和为s

    题目:输入一个整数s,打印出全部和为s的连续整数序列(至少含有2个数).比如输入9,则输出2.3.4和4.5两个序列 方案一:因为序列至少要2个数,则两个数上限值为(1+s)/2,我们能够枚举该序列的 ...

  5. Leetcode: Longest Palindromic Substring. java

    Given a string S, find the longest palindromic substring in S. You may assume that the maximum lengt ...

  6. 数据对象ajax学习篇9

    题记:写这篇博客要主是加深自己对数据对象的认识和总结实现算法时的一些验经和训教,如果有错误请指出,万分感谢. 对ajax工作道理: 下面这段是来自一个网友的blog: Ajax的道理简单来说通过Xml ...

  7. .net处理JSON简明教程

    .net处理JSON简明教程 Json.Net是.net中的一种流行的高性能的JSON框架. 特点 灵活的JSON序列化转化.net对象为JSON字符串.和把JSON字符串转换为.net对象. 手动读 ...

  8. WEB的相关知识总结

    JS-->OOP/Module, DOM, JSON, AJAX------------------><script>, script.js的内容 HTML/JS/CSS HT ...

  9. iOS开发——开发必备OC篇&UITableView设置界面完整封装（四）

    设置界面完整封装(四) 简单MVC实现UITableView设置界面完善封装及拓展使用 关于使用和拓展, 其实基本上就是同UItableView,知识讲数据改一下就可以 拓展使用 1:首先定义一个数组 ...

  10. MHA参数 转

    http://blog.csdn.net/wulantian/article/details/12503473 http://blog.csdn.net/wulantian/article/categ ...