当前位置：网站首页>DOM event proxy (2)

DOM event proxy (2)

2022-07-22 06:23:00 【Front grass seed】

Catalog

1. Event agent

A design idea in Web Design , Using the technology of the target object referenced in the event object

No matter when the event is triggered , Is it the listener of the target object , The event object inside the listener event Can access the target object of this event （ adopt envet.target Get the target that triggers the event ）, Use this characteristic To bind events to parent elements , To represent the business of subset elements , This design is called event proxy .

Characteristic is ： Bind a click event to the parent element , adopt event.target To determine which child element was clicked , To judge the clicked sub elements and non clicked sub elements .

<body>
    <style>
        .box1{
            background-color: darkgray;
        }
        .box2{
            width: 120px;
            height: 40px;
            background-color: firebrick;
            margin: 10px;
        }
    </style>
    <div class="box1">
        <div class="box2">hello1</div>
        <div class="box2">hello2</div>
        <div class="box2">hello3</div>
        <div class="box2">hello4</div>
    </div>
    <script>
        // Business , Print the content of whoever clicks 
        var box2s = document.querySelectorAll('.box2');
        box2s.forEach(el=>{
            el.addEventListener('click',function(e){
                console.log(this.innerHTML);
            })
        })
    </script>
</body>

analysis ： Click on the sub element and the corresponding content will be printed

This design has two disadvantages ：

1. Static event binding , If you add elements dynamically , The added element does not have this event

<body>
    <style>
        .box1{
            background-color: darkgray;
        }
        .box2{
            width: 120px;
            height: 40px;
            background-color: firebrick;
            margin: 10px;
        }
    </style>
    <div class="box1">
        <div class="box2">hello1</div>
        <div class="box2">hello2</div>
        <div class="box2">hello3</div>
        <div class="box2">hello4</div>
    </div>
    <button id="btn" onclick="load1()"> Click to add a new sub element hello5</button>
    <script>
        // Business , Print the content of whoever clicks 
        var box2s = document.querySelectorAll('.box2');
        box2s.forEach(el=>{
            el.addEventListener('click',function(e){
                console.log(this.innerHTML);
            })
        })
        // Add a new child element 
        function load1(){
            var box1 = document.querySelector('.box1');
            var newbox2 = document.createElement('div');
            newbox2.classList = 'box2';
            newbox2.innerHTML = 'hello5';
            box1.appendChild(newbox2);
        }
    </script>
</body>

analysis ： Click on the newly added sub element hello5 It doesn't trigger a click event , You also need to add click events to it again .

Such a set of operation is very troublesome ....

2. Higher performance consumption , The business is relatively repetitive

Like the code above ,forEach There is only one loop , But it will generate 4 A monitor , Give every child element .box2 All set up one , Set a listener whether or not the child element is triggered , The business is the same , Set up 4 individual , Too much memory , It also consumes performance .

Use event agent to solve the above two problems ：

Bind events to box2 The father of box1 binding ： Through event flow ,

<body>
    <style>
        .box1 {
            background-color: darkgray;
        }

        .box2 {
            width: 120px;
            height: 40px;
            background-color: firebrick;
            margin: 10px;
        }
    </style>
    <div class="box1">
        <div class="box2">hello1</div>
        <div class="box2">hello2</div>
        <div class="box2">hello3</div>
        <div class="box2">hello4</div>
    </div>
    <button id="btn" onclick="load1()"> Click to add a new sub element hello5</button>
    <script>
        // Business , Print the content of whoever clicks 
        var box1 = document.querySelector('.box1');
        box1.addEventListener('click', function (e) {
            console.log(e.target.innerHTML); // According to the flow of events , Who triggered box1 Binding click events ,event.target Who is the 
        })
        // Add a new child element 
        function load1() {
            var box1 = document.querySelector('.box1');
            var newbox2 = document.createElement('div');
            newbox2.classList = 'box2';
            newbox2.innerHTML = 'hello5';
            box1.appendChild(newbox2);
        }
    </script>
</body>

analysis ： Newly added child elements hello5, No more click events are set for it . The event broker implements , Give the parent element box1 Bind a click event , All child elements can be monitored （ Whoever triggers it target To whom ）. Give the parent element box1 Bind a click event , Completed the workload of setting the same binding event for all child elements .

2. Some additional technology

1.document You can bind Events

document Although it is an invisible element , But it is part of the chain of events , You can bind Events

        document.onclick = function(){}

2. event.target and event.srcElement Can get the target object of the event （ The trigger of the event ）

3. Get the root element ：document.documentElement

        console.log(document.documentElement); //html

4. Get root node ：document

        console.log(document);

The scope of the root node is wider than that of the root element .

5. obtain body Elements ：document.body

        console.log(document.body); //body

6. Element can be bound with some custom attributes data- Customize data- It's fixed writing

The time to get attributes is Elements .dataset Fixed writing takes

<body>
    <div id="box5" data-blue="999" data-src1="www.123456789.com"></div>
    <script>
        var box5 = document.querySelector('#box5');
        console.log(box5.dataset);
    </script>
</body>

analysis ： These custom attributes are all in one object , Its constructor is DOMStringMap.

7.document.write(); Which tag is the script in , Just write the content in the label

<body>
    <script>
        console.log(document.write(' Script script stay body Inside , stay body It says '));
    </script>
</body>

原网站

版权声明
本文为[Front grass seed]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/203/202207211425421936.html

当前位置：网站首页>DOM event proxy (2)

DOM event proxy (2)

1. Event agent

2. Some additional technology

边栏推荐

猜你喜欢

随机推荐