当前位置：网站首页>DOM events

DOM events

2022-07-25 06:21:00 【Front grass seed】

Catalog

event

Three elements of the event

How events are bound

1. Inline

2. Attribute binding （ Only one handler can be bound handler）

3. Add an event listener to the element （ recommend ）

The unbundling of events

Unbinding of intra row and attribute binding : Elements .onclick = null;

Unbind the event listener

event

The elements are in Some kind of state ( Browser set ) When reached （ Event triggered ）, A pre-set procedure to be executed , We call it Event handle , It's the event .

Three elements of the event

01. Event source ： Give that element / label / Node to bind events

02. Event type ( Some kind of state ) ： eg： Click status

03. Event handler （ Event handle ：handler）

<body>  
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
    </style>
    <div class="box">hello</div>
    <script>
        //  Event source  box
        var box = document.querySelector('.box');
        // Event type （ Some kind of state ）  Click on box Area , When loosening, it is also box Area , Trigger onclick event 
        box.onclick = function(){
            // Event handler （handler）
            console.log(' You bought equipment ');
        }
    </script>
</body>

How pages interact with users ： Through the mouse and Via keyboard

How events are bound

1. Inline

How to write it 1：

<div class="box" onclick="console.log(66666)">hello</div>

analysis :οnclick="javascript:console.log(66666)" This code is not rendered , It is V8 The engine scans it , When the click event occurs , Print 66666

How to write it 2：

<body>  
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
    </style>
    <div class="box" onclick="myconsole.mylog()">hello</div>
    <script>
        var box = document.querySelector('.box');
        //ES6 Method writing of objects in 
        var myconsole = {
            mylog:()=>{
                console.log(' I wrote my own function ');
            }
        }
    </script>
</body>

analysis ： The way 1 in ：οnclick="javascript:console.log(66666)" This code means ,console yes window A property of , This attribute is an object , Then take the object method log. The way 2 in ： Program runtime , First run script The code in the script , Declarative myconsole Variable , It's a big picture window The variable of ,οnclick="javascript:myconsole.mylog()", When you click on an event ： call window.myconsole Then adjust the object method myconsole.mylog(), Print out console.log(' I wrote my own function ');

How to write it 3：

<div class="box" onclick="console.log(66666)">hello</div>

analysis ： Method 1 yes label Label writing , Labels can be omitted .

How to write it 4：

<body>  
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
    </style>
    <div class="box" onclick="fn()">hello</div>
    <script>
        function fn(){
            console.log(' I wrote my own function 2');
        }
    </script>
</body>

analysis ： The advantage of this way of writing is , Next, you can write the function body , Call when you click again above .

The attribute value of the tag is the execution code when the event is triggered

<body>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: palegreen;
        }
    </style>
    <div class="box" onclick="console.log(6666)">box</div>
</body>

2. Attribute binding （ Only one handler can be bound handler）

Both in-line binding and in-line binding are for elements .

Get an object , Adding attributes to it is over .

Object adds members in two ways ：

01.box['name'] = xxx;

02.box.name = xx;

eg：

<body>  
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
    </style>
    <div class="box">hello</div>
    <script>
        var box = document.querySelector('.box');  
        // Object add properties   Some grammar  
        box.onclick = function(){
            console.log(' You bought equipment ');
        }
        box.onclick = function(){
            console.log(' You bought equipment 2');
        }
    </script>
</body>

analysis ： It's just Print out You bought equipment 2 because ：box.onclick Added functions to the object , Then add another function to the same attribute of the same object , The back one covers the front one .

therefore ： Attribute binding method can only bind one handler.

For attribute binding , You need to bind multiple handler Method : Binding handler Just call other functions inside .

3. Add a Event listener （ recommend ）

There is a big difference between listener and attribute binding , Listeners have nothing to do with the elements on the page , It is equivalent to monitoring whether the button on the page has been clicked . Attribute binding is a tag / Elements have their own functions .

eg： For example ： The monitor is the smoke alarm in the car , Call the police when you find smoke , It has nothing to do with the carriage , Attribute binding can be understood as , A mechanism of the carriage itself , Encounter document elevation or smoke , The carriage itself will run some of its own functions .,

addEventListener() It's a Asynchronous non blocking function （ Official supply ） The body of this function is not finished , It does not affect the execution of the following functions .

<body>  
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
    </style>
    <div class="box">hello</div>
    <script>
        var box = document.querySelector('.box'); 
        // Add an event listener to the element  （ Bind event handler ）  
        box.addEventListener('click',function(){
            console.log(666);
        });
        console.log(999);
    </script>
</body>

analysis ： Haven't clicked yet , Just print out 999, Click and print out 666, explain addEventListener() Function does not hinder the operation of the following code .

addEventListener() Method is used for Add an event handler to the specified element （ Event handle handler）.

Parameters 1：enent（ Event type ） must . character string , Specify the event name .

Be careful : Do not use "on" Prefix . for example , Use "click" , Instead of using "onclick".

Parameters 2：function must . finger The function to be executed when the event is triggered .

Be careful ： When the event object is passed into the function as the first parameter . The type of event object depends on the specific event . for example , "click" The event belongs to MouseEvent( Mouse events ) object .

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

It may be worth :

true - Event handler （ Event handle ） Execute... In the capture phase
false- false- Default . Event handler （ Event handle ） In the bubbling phase

Low version of the IE Listener binding event understanding ：

attchEvent() It can only be used for IE browser , There are only two parameters , Parameters 1 And parameters 2

Compatibility writing ：

box.adde = box.addEventListener || box.attchEvent;

box.adde('click',function(){
            console.log(666);
        });

analysis ： The result of the entire expression is not a Boolean , Is an expression , Or box.addEventListener, Or box.attchEvent

You can bind multiple handler, And does not affect the in-line binding

<body>  
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
    </style>
    <div class="box">hello</div>
    <script>
        var box = document.querySelector('.box'); 
        // Add an event listener to the element  （ Bind event handler ）  
        box.addEventListener('click',function(){
            console.log(6661);
        });
        box.addEventListener('click',function(){
            console.log(6662);
        });
    </script>
</body>

analysis : At the click of a button , It will print out 6661 and 6662

The unbundling of events

Unbinding of intra row and attribute binding : Elements .onclick = null;

<body>  
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
    </style>
    <div class="box">hello</div>
    <script>
        var box = document.querySelector('.box');
        // Bind click event    Property to save the function   
        box.onclick = function(){
            console.log(6666);
        }
        // Unbundling    Don't let you save functions , Isn't it just unbound 
        box.onclick = null;   //false It's fine too 
    </script>
</body>

Unbinding is generally put in some conditions , Is meaningful , Generally, when certain conditions are met .

eg： When you grab a red envelope , Once you click the grab red envelope button , Function is working properly , Will connect to the background , It is too laggy. , Because suddenly many people are grabbing ( The moment of order , Everyone sends network requests on the same server ), Don't move at this time （ If you can still jog , The function runs again , Gengka , So it's unreasonable ）, Just press the button to grab the red envelope , You can't click after running . So how to realize function operation （ One click ）, You can't click （ It's running ）？ Just unbind it .

<body>  
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
    </style>
    <div class="box">hello</div>
    <script>
        var box = document.querySelector('.box');
        // Bind click event    Property to save the function   
        box.onclick = function(){
            box.onclick = null;
            console.log(6666);
        }
    </script>
</body>

analysis ： One click , Print out 666, Click again .

So it usually doesn't move , Just refresh the web page . But they are usually robbed , So hand speed is very important ....

Unbind the event listener

Elements .removeEventListener();

Elements .removeEventListener('click',fn1);

Parameters ：event and Monitor ( The listener is the event handler )

Functions are objects , Unbinding is to free the memory space of the object .

<body>  
    <div id="xiake" onclick="console.log(' Class is over 1')"> Class is over </div>
    <script>
        var xiake = document.querySelector('#xiake');
        // Bind click event    Property to save the function   
        xiake.onclick = function(){
            xiake.onclick = null;
            console.log(6666);
        }
        function fn1(){
            console.log(' Really after class 1');
        }
        function fn2(){
            console.log(' Really after class 2');
        }
        function fn3(){
            console.log(' Really after class 3');
        }
        // to xiake Element to add a listening event 
        xiake.addEventListener('click',fn1);
        xiake.addEventListener('click',fn2);
        xiake.addEventListener('click',fn3);
        // Remove the corresponding listener of the corresponding element 
        xiake.removeEventListener('click',fn1);  
    </script>
</body>

analysis ：xiake The event fn1 Function is released , So only monitor events fn1,fn2. And the unbinding of event listeners does not affect the binding of inline events .

原网站

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