冒泡和捕获
<div id="wrapDiv">wrapDiv
<p id="innerP">innerP
<span id="textSpan">textSpan</span>
</p>
</div>
<script>
var wrapDiv = document.getElementById("wrapDiv");
var innerP = document.getElementById("innerP");
var textSpan = document.getElementById("textSpan");
window.addEventListener("click", function(e){
console.log("window 捕获", e.target.nodeName, e.currentTarget.nodeName);
}, true);
document.addEventListener("click", function(e){
console.log("document 捕获", e.target.nodeName, e.currentTarget.nodeName);
}, true);
document.documentElement.addEventListener("click", function(e){
console.log("documentElement 捕获", e.target.nodeName, e.currentTarget.nodeName);
}, true);
document.body.addEventListener("click", function(e){
console.log("body 捕获", e.target.nodeName, e.currentTarget.nodeName);
}, true);
wrapDiv.addEventListener("click", function(e){
console.log("wrapDiv 捕获", e.target.nodeName, e.currentTarget.nodeName);
}, true);
innerP.addEventListener("click", function(e){
console.log("innerP 捕获", e.target.nodeName, e.currentTarget.nodeName);
}, true);
textSpan.addEventListener("click", function(e){
console.log("textSpan 捕获", e.target.nodeName, e.currentTarget.nodeName);
}, true);
window.addEventListener("click", function(e){
console.log("window 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
document.addEventListener("click", function(e){
console.log("document 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
document.documentElement.addEventListener("click", function(e){
console.log("documentElement 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
document.body.addEventListener("click", function(e){
console.log("body 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
wrapDiv.addEventListener("click", function(e){
console.log("wrapDiv 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
innerP.addEventListener("click", function(e){
console.log("innerP 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
textSpan.addEventListener("click", function(e){
e.stopPropagation();
console.log("textSpan 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
委托
<ul id="list">
<li id="item1">item1</li>
<li id="item2">item2</li>
<li id="item3">item3</li>
</ul>
<script>
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");
document.addEventListener("click", function (event) {
var target = event.target;
switch (target.id) {
case 'item1':
console.log('item1');
break;
case 'item2':
console.log('item1');
break;
case 'item3':
console.log('item1');
break;
}
})
</script>
综合案例
<body>
<div id="btnGroup">
<button type="button" tag="beginBtn">开始洗衣服</button>
<button type="button" tag="checkBtn">查看洗完没</button>
<button type="button" tag="stopBtn">停止洗衣服</button>
</div>
</body>
<script>
var Washmachine = {
status: 0,
begionAction: function (obj) {
this.status = 1;
this.temp = 1;
var objInit = {
el: '#test',
clothes: 10,
powder: 10,
Itime: 1000
}
var lastObj = Object.assign({
}, objInit, obj);
console.log("正在洗衣服中...");
this.timer = setInterval(function () {
if (this.status == 1) {
this.temp++;
} else if (this.status == 2) {
console.log("已完成洗衣服...");
clearInterval(this.timer);
}
}.bind(this), 1000)
setTimeout(function () {
this.status = 2;
}.bind(this), lastObj.Itime);
},
ViewResult: function () {
if (this.status == 1) {
console.log("洗衣机正在工作...");
console.log("截止目前工作的时长" + this.temp);
} else if (this.status == 2) {
console.log("已完成洗衣服...");
clearInterval(this.timer);
}
},
stopWashing: function () {
if (this.timer) {
clearInterval(this.timer);
}
}
}
document.getElementById('btnGroup').addEventListener('click', function (ev) {
var target = ev.target;
var tag = target.getAttribute('tag');
switch (tag) {
case 'beginBtn':
Washmachine.begionAction({
Itime: 10000
});
break;
case 'checkBtn':
Washmachine.ViewResult();
break;
case 'stopBtn':
Washmachine.stopWashing()
break
}
})
</script>
