Javascript addEventListener dispatchEvent

测试代码:
分别在嵌套的元素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,包含自身和祖先的事件):

Javascript addEventListener dispatchEvent_第1张图片

不勾选Ancestors,仅自身的事件:
Javascript addEventListener dispatchEvent_第2张图片

你可能感兴趣的:(Javascript addEventListener dispatchEvent)