First, the event propagation
Sequence: Capture => target => bubbling
1, the event bubbling
2, the event capture
J into the inside from the outside, the capture process is called an event.
Handler events occurring in the bubbling phase, rather than the capture phase
for example:
Example: Click d3
(1) html = capture phase> body => d1 => d2 => d3 events
(2) to reach the target phase d3 events
Bubbling phase (3) d3 => d2 => d1 => body => html event
<html>
<body>
<div id="d1">
D1
<div id="d2">
d2
<div id="d3">
d3
</div>
</div>
</div>
<script>
var d1 = document.getElementById('d1')
var d2 = document.getElementById('d2')
var d3 = document.getElementById('d3')
d1.onclick = ()=>{
alert('d1')
}
d2.onclick = ()=>{
alert('d2')
}
d3.onclick = ()=>{
alert('d3')
}
</script>
——————————————————————————
Second, the event is bound in three forms
1, inline binding
2, dynamic binding
d1.onclick = ()=>{}
3, event listeners
d1.addEventListener('click',()=>{})