event learn
<div id="b0" class="box">
<div id="b1" class="box">
<div id="b2" class="box">
<div id="b3" class="box">
<div id="b4" class="box inner">
</div>
</div>
</div>
</div>
</div>
<table class="empty">
<thead>
<tr>
<th>target</th>
<th>phase</th>
<th>currentTarget</th>
<th>this</th>
<th>listener</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">Click on the boxes!</td>
</tr>
</tbody>
</table>
<a id='baidu' href="https://www.baidu.com">baidu</a>
var table = document.querySelector("table"),
tbody = table.querySelector("tbody");
addEventListeners();
function addEventListeners() {
window.addEventListener("click", clearLog, true);
var innerBox = document.querySelector(".box.inner");
var n = innerBox;
while (n) {
n.addEventListener("click", listener("c1"), true);
n.addEventListener("click", listener("c2"), true);
n.addEventListener("click", listener("b1"));
n.addEventListener("click", listener("b2"));
n = n.parentNode;
}
/* 阻止事件 */
// window.addEventListener('click', e => { e.stopPropagation(); }, true);
window.addEventListener("click", listener("c1"), true);
window.addEventListener("click", listener("c2"), true);
window.addEventListener("click", listener("b1"));
window.addEventListener("click", listener("b2"));
/* 阻止默认事件 */
window.addEventListener("click", e => { e.preventDefault(); }, true);
}
function listener(id) {
return function(e) {
log(e.eventPhase, e.currentTarget, this, e.target, id);
};
}
function log(phase, currentTarget, _this, target, id) {
var row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = formatNode(target);
row.appendChild(td);
switch (phase) {
case Event.CAPTURING_PHASE:
phase = "capturing";
break;
case Event.AT_TARGET:
phase = "at target";
break;
case Event.BUBBLING_PHASE:
phase = "bubbling";
break;
}
var td = document.createElement("td");
td.innerHTML = phase;
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = formatNode(currentTarget);
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = formatNode(_this);
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = id;
row.appendChild(td);
tbody.appendChild(row);
}
function formatNode(n) {
var out;
if (n == window) out = "window";
else {
out = n.nodeName.toLowerCase();
if (n.id) out += "#" + n.id;
}
return out;
}
function clearLog() {
tbody.innerHTML = "";
table.classList.remove("empty");
}
$col-bg: #f3f3f3;
$col-outer-box: #bbb;
$sp: 40px;
html {
//pointer-events: none;
}
body {
margin: 20px 0 0;
background-color: $col-bg;
color: #9a9796;
//pointer-events: none;
display: flex;
> * {
flex: 0 0 auto;
&:first-child {
margin-right: 20px;
}
}
justify-content: center;
align-items: flex-start;
font-family: monospace;
font-size: 13px;
}
.box {
display: inline-block;
font-size: 0;
padding: $sp;
.inner {
padding: 0;
width: $sp;
height: $sp;
}
transition: background-color 0.3s;
cursor: pointer;
position: relative;
&::after {
position: absolute;
top: 0;
right: 0;
margin: 0;
width: $sp;
line-height: $sp;
text-align: center;
font-size: 14px;
//font-family: monospace;
color: #000;
opacity: 0;
transition: opacity 0.3s;
}
}
body > .box {
background-color: $col-outer-box;
&::after {
content: 'b0';
opacity: 1;
}
> .box:hover {
background-color: lighten($col-outer-box, 5%);
&::after {
content: 'b1';
opacity: 1;
}
> .box:hover {
background-color: lighten($col-outer-box, 10%);
&::after {
content: 'b2';
opacity: 1;
}
> .box:hover {
background-color: lighten($col-outer-box, 15%);
&::after {
content: 'b3';
opacity: 1;
}
> .box:hover {
background-color: lighten($col-outer-box, 20%);
&::after {
content: 'b4';
opacity: 1;
}
}
}
}
}
}
table {
border-collapse: collapse;
th, td {
padding: 5px;
}
th {
padding-top: 0;
text-align: left;
}
&.empty tbody > tr:first-child {
text-align: center;
}
}