测试代码：
分别在嵌套的元素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. Java.lang.NoSuchMethodError: org.slf4j.spi.LocationAwareLogger.log(Lorg/slf4j/Marker;Ljava/lang/String;ILjava/lang/String;[Ljava/lang/Object;Ljava/lang/Throwable;)V

    今天接入激光推送,一直报错: Java.lang.NoSuchMethodError: org.slf4j.spi.LocationAwareLogger.log(Lorg/slf4j/Marker; ...

  2. C# 绘制统计图(柱状图, 折线图, 扇形图)

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  3. li在IE中底部空行的BUG

    li在IE中底部空行的BUG 但是这次li在IE中底部出现的不是3像素而是一整条空白行,如图:HTML代码: <ul> <li><a href="#" ...

  4. DevExpress 13.2.6源码、安装包、汉化包下载和教程

    DevExpress比DotNetBar控件成熟很多,当然源码是公开的,但是最新版本需要9K多.如果不是土豪,用已经破解的版本或者自己拿源码编译一份就可以了,老外就是这么好. 首先在这里下载然后解压准 ...

  5. ASP.NET中IsPostBack属性研究

    通过页面的IsPostback属性,可以检查 .aspx 页是否为传递回服务器的页面:当加载页面并对控件的更改属性处理之前,用户可以在page_Load事件中检查该页面是否被传递回的页面. 一般是在p ...

  6. 小凡的Linux主机与时间服务器同步记录

    小凡的Linux主机与时间服务器同步记录 导读 我们新安装的Linux主机,如果没有做与互联网服务器时间同步的处理的话,当我们使用date命令的时候,我们就看不到当前的时间,只能看到过去的时间.在我们 ...

  7. 标准库 - fmt/scan.go 解读

    // Copyright 2010 The Go Authors. All rights reserved. // Use of this source code is governed by a B ...

  8. 内核链表list.h

    stddef.h #define offsetof(TYPE, MEMBER) ((size_t) &((TYPE *)0)->MEMBER) list.h #ifndef _LINUX ...

  9. GCC 编译选项(转)

    转:http://www.cnblogs.com/xmphoenix/archive/2011/03/21/1989944.html gcc提供了大量的警告选项,对代码中可能存在的问题提出警 告,通常 ...

  10. 关于requestFeature() must be called before adding content

    想显示dialog时,如果想显示的是自定义布局的dialog,并使用如下方式,则会报错requestFeature() must be called before adding content Ale ...