当前位置：网站首页>DOM event flow

DOM event flow

2022-07-25 04:01:00 【Like the rising sun】

List of articles

1. Event flow phase
2. addEventListener Three parameters of
3. Summary

DOM The event flow describes DOM The stage of time response 、 route .

1. Event flow phase

There are three stages of event flow , They are as follows ：

1.1 Capture phase

from window Start , Find the deepest node that triggers the event , In the process, if a node is bound to the corresponding event , The event is triggered

1.2 Target stage

Find the deepest node touched by the event

1.3 bubbling phase

Return from the deepest node according to the captured path , In the process, if a node is bound to the corresponding event , The event is triggered

for instance

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>gnn</title>
</head>
<body>
    <style> .box {
       display: flex; align-items: center; justify-content: center; } .size-100 {
       width: 100px; height: 100px; background: #5653e4; } .size-200 {
       width: 200px; height: 200px; background: rgb(168, 166, 165); } .size-300 {
       width: 300px; height: 300px; background: rgb(251, 251, 251); } </style>

    <div class="box size-300">
        <div class="box size-200">
            <div class="box size-100">
            </div>
        </div>
    </div>

    <div class="result"></div>

    <script> var boxes = document.querySelectorAll('.box'); var result = document.querySelector('.result'); boxes.forEach(function (box) {
       box.addEventListener('click', function () {
       var el = document.createElement('p'); el.innerText = ' Now what triggers the click event is ' + this.className; result.appendChild(el); }); }); </script>
    
</body>
</html>

Click the blue area in the middle to find that the event is executed upward by the deepest node you click , Here's the picture

Insert picture description here
From size-100 To size-200 To size-300, This is the process of bubbling .

If you want the event to execute in the capture phase , It can deliver addEventListener The third parameter in the method . Let's talk about it addEventListener Method

2. addEventListener Three parameters of

Use element.addEventListener You can bind multiple event handlers , Let's introduce the parameter values of this method

2.1 event

must . character string , Specify time name

Be careful ： Do not use “on” Prefix . for example , Use “click” , instead of “onClick”

2.2 function

must . Specifies the function to be executed when the event is triggered .

When the event object is passed into the function as the first parameter . The type of event object depends on the specific event .

2.3 useCapture

Optional , Boolean value , Specifies whether the event is executed during the capture or bubble phase .

· false Default ： The handler executes in the bubbling phase .
· true ： The handler executes during the capture phase .

3. Summary

The development process rarely takes the stage triggered by change events . But the concept of event flow is still important , Because many times we have to stop the event from bubbling .

原网站

版权声明
本文为[Like the rising sun]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207192106235824.html