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>