测试代码：
分别在嵌套的元素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. 15 Examples To Master Linux Command Line History

    When you are using Linux command line frequently, using the history effectively can be a major produ ...

  2. 手机web开发Repeater四层嵌套

    最近有朋友想让我给他做个手机上页面,页面功能是显示省--市--区--门店信息,这种层级关系的数据,首先来看看效果: 我想现在的手机都是智能机了对于普通的asp.net页面开发应该没什么两样,不过最终开 ...

  3. 【转】Android 防破解技术简介

    http://www.cnblogs.com/likeandroid/p/4888808.html Android 防破解技术简介 这几年随着互联网的不断发展,Android App 也越来越多!但是 ...

  4. Segger RTT : Real Time Terminal SRAM 调试解决方法

    http://segger.com/jlink-real-time-terminal.html Real Time Terminal SEGGER's Real Time Terminal (RTT) ...

  5. .Net 垃圾回收和大对象处理

    CLR垃圾回收器根据所占空间大小划分对象.大对象和小对象的处理方式有很大区别.比如内存碎片整理 —— 在内存中移动大对象的成本是昂贵的,让我们研究一下垃圾回收器是如何处理大对象的,大对象对程序性能有哪 ...

  6. IdHttpServer实现webservice

    IdHttpServer实现webservice   朋友有个项目,通信协议使用HTTP,数据序列使用BIN(二进制).他不知道要选用何种技术方案. REST webservice是http+json ...

  7. Grunt打造前端自动化工作流

    HTML去掉注析.换行符 - HtmlMin CSS文件压缩合并 – CssMinify JS代码风格检查 – JsHint JS代码压缩 – Uglyfy image压缩 - imagemin ht ...

  8. iOS开发——实用OC篇&多种定时器详细介绍

    多种定时器详细介绍   在软件开发过程中,我们常常需要在某个时间后执行某个方法,或者是按照某个周期一直执行某个方法.在这个时候,我们就需要用到定时器. 然而,在iOS中有很多方法完成以上的任务,到底有 ...

  9. php获取当前url完整地址

    //获取当前访问的完整url地址 function getCurUrl() { $url = 'http://'; if (isset($_SERVER['HTTPS']) && $_ ...

  10. C语言中的函数

    C语言中的函数 目录 概述——对函数的理解 C语言中函数的定义和声明 函数允许的参数类型 函数允许的返回类型 递归 概述 由于有些代码段在编写程序的时候经常会用到,此时我们为了减少代码文件的长度和增加 ...