Event flow model

JS event flow model
Event Capturing is a top-down propagation method. Taking click event as an example, it will propagate inward from the outermost root node to the clicked node, which is a way of gradually propagating inward from the outermost node to the target node.
Event Bubbling is a bottom-up propagation method. Similarly, take the click event as an example. The event starts from the clicked node, and then gradually propagates upward to the highest level node.
DOM0 level model
Also known as the original event model, this method is relatively simple and compatible with all browsers, but it couples the interface with logic and has poor maintainability.
example

 1 css
 2 `div{
 3 width: 400px;
 4 height: 400px;
 5 background-color: teal;
 6 margin: auto;
 7 }
 8 p{
 9 width: 300px;
10 height: 300px;
11 background-color: yellow;
12 margin: auto;
13 margin-top: 50px;
14 
15 }
16 span{
17 width: 100px;
18 height: 100px;
19 background-color: tomato;
20 margin: auto;
21 margin-top: 100px;
22 
23 }`
24 html+js
25 `<div>
26 <p>
27 <span></span>
28 </p>
29 </div>
30 <script>
31 var div = document.querySelector('div');
32 var p = document.querySelector('p');
33 var span = document.querySelector('span');
34 // Click event
35 div.onclick = p.onclick = function(){
36 console.log(123);
37 }
38 span.onclick = function(){
39 console.log('asd');
40 }
41 </script>`


Picture 1 is the effect picture of clicking div
In picture 2, click the p tag and it will appear twice. The first time is the p tag, followed by the div tag
In picture 3, click the span tag and it will appear three times. The first time is span, the second is p tag, and the last is div
IE event model
IE8 and earlier versions do not support capturing events. The IE event model has two processes:
In the event processing stage, target phase, the event reaches the target element and triggers the listening event of the target element.
In the event bubbling phase, the bubbling phase event bubbles from the target element to the document, and executes the events bound by the nodes in turn.
DOM2
DOM2 event model is a standard model formulated by W3C. It supports capture events and bubble events. The processing stages of calling events are capture, target and bubble in turn.
``
The difference between binding and listening events
When the directly bound function in DOM0 is executed, the later defined function will overwrite the previously bound function. The following example only executes alert(1) instead of alert(0). click() is an object event. Click to trigger the method of onclick() binding. onclick() is the attribute of the object. Binding it to the function is the method executed after the click() event is triggered.

`<style type="text/css">
div{
display: flex;
justify-content: center;
align-items: center;
}
</style>

<body>
<div id="i1" style="height: 150px;width: 150px;background: red;"></div>
</body>

<script type="text/javascript">

document.getElementById("i1").onclick = function(){
alert(0);
} // Covered

document.getElementById("i1").onclick = function(){
alert(1);
} // implement

</script>
</html>`

addEventListener can bind multiple functions for events without adding on. It can also receive the third parameter useCapture to determine whether the capture phase or bubbling phase of the event binding is executed.

`document.getElementById("i1").addEventListener('click',function(e) {
alert(0);
}) // implement

document.getElementById("i1").addEventListener('click',function(e) {
alert(1);
}) // implement`

attachEvent can bind multiple functions for the event. When binding, it needs to add on. It only supports the execution in the bubbling phase, so there is no third parameter.

`document.getElementById("i1").attachEvent('onclick',function(e){
alert(0);
}) // implement

document.getElementById("i1").attachEvent('onclick',function(e){
alert(1);
}) // implement`

 

 

Tags: Javascript

Posted by benphelps on Wed, 18 May 2022 06:08:10 +0300