Event stream
The sequence of events receive events from the page
image.png
Event Capture
Reached the destination node (upper to lower) from the window object, became the capture phase
Event bubbling
Window object transmitted from the target node (upper layer to lower layer)
Acting events (event delegate)
Principle: use the appropriate event bubbling mechanism required to bind to the outer layer
to achieve:
<body>
<ul id="list">
<li>1111111</li>
<li>22222222</li>
<li>43333</li>
</ul>
<script>
document.getElementById('list').addEventListener('click', function (e) {
// e.target IE8就有这个属性，所以IE8以上不需要写兼容
if (e.target && e.target.nodeName.toUpperCase() === 'LI') {
console.log(e.target)
}
})
</script>
</body>
IE8 printed event.png
Reproduced in: https: //www.jianshu.com/p/724517ef0156