当前位置：网站首页>JS event details

Adding an event to an element is called a registration event , Registration events are also called binding events . There are two ways to register Events ：

（1） Traditional way of registration

（2） Monitor registration method

1.1、 Traditional way of registration

The traditional registration method handles events by binding a callback function to a specified event source , When the specified event is triggered, the callback function will be called , In this way, the interaction between the page and the user can be realized .

You can bind an event handler to an element in two ways ：

（1） adopt HTML Element specifies event attributes to bind

<button onclick="console.log('haha, Cheat you. ...')"> I have a prize </button>

（2） adopt DOM Object to the specified properties

    <button id="btn"> Am I ..</button>
    <script>
        var btn = document.querySelector('#btn');
        btn.onclick = function() {
            console.log(' thank you ....')
        };
    </script>

1.2、 Monitor registration method

Another way to register special events is to register through event listening , It's called setting up event listeners , It is W3C The standard recommends the use of . adopt EventTarget.addEventListener() Method to implement .

EventTarget.addEventListener() Register the specified listener with eventTarget On , When the object triggers the specified event , The specified callback function will be executed . The event target can be an element on a document Element,Document and Window Or any other object that supports Events ( such as XMLHttpRequest).

addEventListener() The working principle of is to realize EventListener Add a function or object to the function or object that calls it EventTarget In the event listener list for the specified event type on .

Grammar format ：

target.addEventListener(type, listener, useCapture);

Parameter description ：

（1）type： must , The type of event listening , Such as click、mouseover etc. ;

（2） listener： must , One implemented EventListener Object of the interface , Or a function ;

（3） useCapture： Optional , Indicates whether it is bubbling or trapping . The value is true To capture , Otherwise, it means bubbling .

Example ：

    <button> Click on </button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            console.log(' Good weekend, everyone ！');
        });
    </script>

1.3、 Comparison of two registration methods

（1） If you register in the traditional way , When adding the same event to the same object , Later events will overwrite the previous events ; If you register by listening , When the same object is bound to the same multiple events , These events will be executed .

（2） The traditional registration method can only bubble , Cannot capture ; The monitoring registration method can bubble or capture .

Example ：

<button class="btn1"> Traditional registration </button>
<button class="btn2"> Monitor registration </button>

<script>
    var btn1 = document.querySelector('.btn1');
    var btn2 = document.querySelector('.btn2');

    //  Traditional registration 
    btn1.onclick = function () {
        console.log(' Tomorrow Monday , Let's have a rest , You can sleep in , ha-ha ');
    };
    btn1.onclick = function () {
        console.log(' On Tuesday we continue ');
    };

    //  Monitor registration 
    btn2.addEventListener('click', function () {
        console.log(' Today is Sunday , Class is almost over , ha-ha ');
    });
    btn2.addEventListener('click', function () {
        console.log(' But it will take time to digest today's content .');
    });
</script>

Two 、 Unbind event

For traditional registration , The syntax of the unbinding event is ：

eventTarget. Event type  = null;

For the monitoring registration method , The syntax of the unbinding event is ：

eventTarget.removeEventListener(type, listener[, useCapture]);

Example ：

<button class="btn1"> Traditional registration </button>
    <button class="btn2"> Monitor registration </button>
    <script>
        var btn1 = document.querySelector('.btn1');
        var btn2 = document.querySelector('.btn2');
        //  Traditional registration 
        btn1.onclick = function() {
            console.log(' Tomorrow Monday , Let's have a rest , You can sleep in , ha-ha ');
        };
        //  Unbind event 
        btn1.onclick = null;

        //  Monitor registration 

        /* Cannot unbind the event 
        btn2.addEventListener('click', function () {
            console.log(' Today is Sunday , Class is almost over , ha-ha ');
        });
        btn2.removeEventListener('click', function () {
            console.log(' We have nothing to do .')
        });*/


        function fn() {
            console.log(' Today is Sunday , Class is almost over , ha-ha ');
            btn2.removeEventListener('click', fn);
        }

        btn2.addEventListener('click', fn);
    </script>

Be careful ：

about Traditional registration Events The unbundling of ：

（1） Write the unbinding event anywhere in the function , Its registration event will be executed only once ;

（2） Write the unbinding event before the registration event outside the function , Unbind event is invalid for it ; Write the unbinding event after the registration event outside the function , Registration events will not be executed .

about Listen for registration events The unbundling of ：

（1） Write the unbinding event anywhere in the function , Its registration event will be executed only once ;

（2） take The unbinding event is written outside the function , Then the registered event will be invalid .

（3） Unbind the listening registration method , Note that the event type and listener function must be the same , Otherwise, unbinding is invalid .

3、 ... and 、 Flow of events

Because in HTML The tags in are nested with each other , We can think of elements as a box in a box , document It's the outermost big box . When you click a div when , You also clicked div Parent element of , Even the entire page .

Then execute the click event of the parent element first , Let's do it first div Click event for ？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Flow of events </title>
    <style>
        .outer {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: blueviolet;
            text-align: center;
        }
        .inner {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: cornflowerblue;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="inner"> Inner box </div>
</div>
<script>
    var inner = document.querySelector('.inner');
    var outer = document.querySelector('.outer');

    inner.addEventListener('click', function () {
        console.log('inner');
    });
    outer.addEventListener('click', function () {
        console.log('outer');
    });
    //  to  body  Add click event 
    document.body.addEventListener('click', function () {
        console.log('body');
    });
    //  to  html  Add click event 
    document.documentElement.addEventListener('click', function () {
        console.log('html');
    });
    //  to  document  Add click event 
    document.addEventListener('click', function () {
        console.log('document');
    });
    window.addEventListener('click', function () {
        console.log('window');
    });
</script>
</body>
</html>

Event flow is also called event propagation , Describes the order in which events are received from the page . When an event occurs, it will be displayed between the element nodes according to given Sequential propagation of , This communication process is called DOM Flow of events .

The event flow consists of three stages ： event Capture phase (capture phase)、 be in Target stage (target phase) and Event Bubbling Stage (bubbling phase).

（1） Capture phase ： Respond downward from uncertain event source to determined event source .

（2） Target stage ： The real target node is processing the event phase （ For example, the node where you click the mouse to trigger the event ）.

（3） bubbling phase ： From explicit event source to ambiguous event source, respond upward in turn .

Little story ：IE（ Microsoft ） It is proposed to respond to events layer by layer from the target element , That is, bubbling event flow ; and Netscape（ Netscape ） Propose to respond to events from the layer to the target element , That is, captured event flow . In the end by the W3C The organization has developed uniform standards in a compromise way —— First capture and then bubble .

Be careful ：

（1）JavaScript Only one of the capture or bubbling phases can be performed in the code , Or bubbling , Or capture .

（2）onclick And attachEvent Only the bubbling stage is available for registered events .

（3）addEventListener(type, listener[, useCapture]) The third parameter is zero true Represents the capture phase , The default is empty or false It's the bubbling stage .

（4） Some events do not support the bubbling phase （ Common ones ）：blur、focus、mouseenter、mouseleave、

load、unload、resize.

3.1、 Event Bubbling

Event bubbling is an event that propagates from an explicit object to an ambiguous object .

Example ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Event Bubbling </title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script>
    var box = document.querySelector('.box')
    box.addEventListener('click', function () {
        console.log("div")
    });
    document.body.addEventListener('click', function () {
        console.log('body');
    });
    document.documentElement.addEventListener('click', function () {
        console.log('html');
    });
</script>
</body>
</html>

Running results ：

Be careful ： Event bubbling is the upward propagation from the target object .

3.2、 Event capture

Event capture is the process of capturing from an ambiguous object to a target object .

Example ：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title> Event capture </title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        var box = document.querySelector('.box')
        box.addEventListener('click', function() {
            console.log("div")
        }, true);
        document.body.addEventListener('click', function() {
            console.log('body');
        }, true);
        document.documentElement.addEventListener('click', function() {
            console.log('html');
        }, true);
    </script>
</body>

</html>

Running results ：

Be careful ：

（1） To capture , Only the event listening registration method can be used , You cannot use the traditional event registration method ;

（2） You need to set the third parameter of the listening registration method to true

For today's development , We usually only deal with bubbling , Instead of dealing with capture .

Four 、 Event object

It's triggering DOM When you have an event on , An event object is generated event. This object contains all the events related to

Information about . Include the elements that lead to the event , Types of events and other information related to specific events .

such as ：

The event object caused by the mouse operation will contain the information of the mouse position .

And such as ：

The event object caused by keyboard operation will contain information about the pressed key .

events , The system will automatically generate an event object .

The event object is obtained through a Shape parameter To operate the , This parameter can be determined by itself , It's usually used event、e Express , Formal parameters are written in parentheses of the function .

Be careful ：

（1） Event objects can only be accessed inside the handler , The handler function allows the object to be automatically destroyed after completion ;

（2） There's a compatibility problem .

Example ：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title> Event object </title>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(event) {
            //  Dealing with compatibility issues 
            event = event || window.event;
            console.log(event);
            //  From the event object  event  Get the target object in 
            console.log(event.target.innerHTML);
        });
    </script>
</body>

</html>

5、 ... and 、 Event properties

Common properties and methods of event objects ：

Example ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Event object properties </title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #ff6700;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script>
    var box = document.querySelector('.box')
    box.onclick = function (event) {
        event = event || window.event;
        // 1.  Get target object 
        // 1.1 target  standard 
        console.log(event.target)
        // 1.2 srcElement  Nonstandard 
        console.log(event.srcElement);
        // 2.  Get event type , No  on
        console.log(event.type);
        // 3.  Get the coordinates in the visualization area 
        console.log(event.clientX + ', ' + event.clientY);
    };
</script>
</body>
</html>

5.1 The objective of the event

The target objects are currentTarget、target and srcElement.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Event object target </title>
    <style>
        ul,li {
            list-style: none;
        }
        .item {
            width: 100px;
            height: 50px;
            background-color: #ff6700;
            margin: 10px;
            text-align: center;
            line-height: 50px;
            color: white;
        }
    </style>
</head>
<body>
<ul id="box">
    <li class="item">1</li>
    <li class="item">2</li>
</ul>
<script>
    var box = document.querySelector('#box')
    box.onclick = function (event) {
        event = event || window.event;
        console.log(event.target);
        console.log(event.srcElement);
        console.log(event.currentTarget);
        console.log(this);
    };
</script>
</body>
</html>

explain ：

（1）currentTarget： What is returned is the object that binds the event ;

（2）target： What is returned is the actual target object of the event （IE8 I won't support it ）;

（3） srcElement： What is returned is the actual target object of the event （IE8 Support ）;

（4）this ： Back to Is the binding element of the event .

e.targer and this The difference between ：

（1） this Is the binding element of the event , It is associated with currentTarget To point to the same ;

（2）e.target Is the element triggered by the event

5.2、 Event delegation

Event delegation refers to the common ancestor elements that bind events to elements , When an event on a descendant element triggers , Will bubble all the way to the ancestral element , The event is handled by the response function of the ancestor element .

Event delegation is the use of bubbling , You can reduce the number of event bindings through delegates , Improve the performance of the program .

Advantages one ： Improve program performance

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title> Event delegation </title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        ul {
            list-style: none;
            overflow: hidden;
            margin-top: 80px;
        }
        
        ul li {
            float: left;
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: #fff;
            background-color: #000;
            margin: 0 10px
        }
    </style>
</head>

<body>
    <ul id="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        var ul = document.querySelector('#box')
            /*
            var lis = document.querySelectorAll('li')
            for (var i = 0; i < lis.length; i++) {
                lis[i].onmouseover = function () {
                    this.style.backgroundColor = 'blue';
                };
                lis[i].onmouseout = function () {
                    this.style.backgroundColor = 'black';
                };
            }*/

        // Use event delegation 
        ul.onmouseover = function(e) {
            console.log(e);
            if (e.target.nodeName.toLowerCase() === 'li') {
                e.target.style.backgroundColor = 'blue';
            }
        };
        ul.onmouseout = function(e) {
            if (e.target.nodeName.toLowerCase() === 'li') {
                e.target.style.backgroundColor = 'black';
            }
        };


    </script>
</body>

</html>

From the above code, you can find , When binding events to ul Upper time , One cycle is reduced . This can improve program performance . And bind the event to ul Event delegation is the way to delegate events .

Advantage two ： The second benefit of using event delegates is that subsequent child elements can also have delegated events .

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title> Event delegation </title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        ul {
            list-style: none;
            overflow: hidden;
            margin-top: 80px;
        }
        
        ul li {
            float: left;
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: #fff;
            background-color: #000;
            margin: 0 10px
        }
    </style>
</head>

<body>
    <ul id="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        var ul = document.querySelector('#box')
            /*
            var lis = document.querySelectorAll('li')
            for (var i = 0; i < lis.length; i++) {
                lis[i].onmouseover = function () {
                    this.style.backgroundColor = 'blue';
                };
                lis[i].onmouseout = function () {
                    this.style.backgroundColor = 'black';
                };
            }*/

        // Use event delegation 
        ul.onmouseover = function(e) {
            console.log(e);
            if (e.target.nodeName.toLowerCase() === 'li') {
                e.target.style.backgroundColor = 'blue';
            }
        };
        ul.onmouseout = function(e) {
            if (e.target.nodeName.toLowerCase() === 'li') {
                e.target.style.backgroundColor = 'black';
            }
        };

        var li = document.createElement('li');
        li.innerHTML = '6';
        ul.append(li);
    </script>
</body>

</html>

6、 ... and 、 Event method

6.1、 Stop the event from bubbling

The so-called bubbling refers to the upward propagation of events , When an event on a descendant element is triggered , The same event of its ancestor element will also be triggered . This feature of event bubbling has benefits , There are also disadvantages . If you do not want event bubbling to occur, you can cancel bubbling through the event object .

Example ： Cancel the bubbling

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Stop the event from bubbling </title>
    <style>
        .outer {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: blueviolet;
            text-align: center;
            position: relative;
        }
        .inner {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: cornflowerblue;
            line-height: 200px;
            color: #fff;
        }

    </style>
</head>
<body>
<div class="outer">
    <div class="inner"> Inner box </div>
</div>
<script>
    var inner = document.querySelector('.inner');
    var outer = document.querySelector('.outer');
    //  When you click  inner  when , Do not trigger external  div  Click events for 
    inner.onclick = function (event) {
        console.log('inner')
        //  Dealing with compatibility issues 
        if (event.stopPropagation()) {
            event.stopPropagation(); //  This method is early IE Version not supported 
        } else {
            event.cancelBubble = true; // IE Supported by 
        }
    };
    outer.addEventListener('click', function (event) {
        console.log('outer');
    });

</script>
</body>
</html>

explain ： If you don't want bubbling hair , We can use... In the event object stopPropagation() Method to prevent event bubbling .

In the event object except stopPropagation() Method can prevent the event from bubbling , There's another way called stopImmediatePropagation() , It also prevents events from bubbling .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Stop the event from bubbling </title>
    <style>
        .outer {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: blueviolet;
            text-align: center;
            position: relative;
        }
        .inner {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: cornflowerblue;
            line-height: 200px;
            color: #fff;
        }
        .outer a {
            position: absolute;
            bottom: 5px;
            left: 10px;
            color: white;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="inner"> Inner box </div>
    <a href="javascript:void(0)"> Click on </a>
</div>
<script>
    var inner = document.querySelector('.inner');
    var outer = document.querySelector('.outer');
    var a = document.querySelector('a');
    //  When you click  inner  when , Do not trigger external  div  Click events for 
    inner.onclick = function (event) {
        console.log('inner')
        //  Dealing with compatibility issues 
        if (event.stopPropagation()) {
            event.stopPropagation(); //  This method is early IE Version not supported 
        } else {
            event.cancelBubble = true; // IE Supported by 
        }
    };
    outer.addEventListener('click', function (event) {
        console.log('outer');
    });
    a.addEventListener('click', function (event) {
        console.log('-----')
        //event.stopPropagation();
        event.stopImmediatePropagation();
    });
</script>
</body>
</html>

stopPropagation() And stopImmediatePropagation()

The same thing ： Can prevent the occurrence of event bubble .

difference ：

（1）stopPropagation() Method can only prevent event bubbling , Cannot prevent the execution of the same event for the same object .

（2） stopImmediatePropagation() Method can prevent event bubbling , It can also stop the same pair Execution of the same event as .

6.2、 Blocking default behavior

6.2.1、 Block the default behavior of links

stay HTML Many elements in have default behavior , For example, hyperlinks have the default behavior of jumping to the page after clicking , Submit button There is a default behavior that improves the form . How to prevent this default behavior ？

It can be prevented by methods in the event object .

    <a href="javascript:void(0)"> TaoBao </a>
    <a href="javascript:;"> tencent </a>
    <a href="https://www.baidu.com"> Baidu </a>
    <script>
        var as = document.querySelectorAll('a');
        as[2].onclick = function(event) {
            //console.log(event);
            event.preventDefault();
        };
    </script>

explain ： For hyperlinks , There are three ways to prevent the default behavior of links .

6.2.2、 Prevent the submit button from submitting the default behavior of the form

    <p>
        <form action="https://www.baidu.com" method="post">
            <input type="text" name="s">
            <input type="submit" value=" Provide ">
        </form>
    </p>
    <script>
        var form = document.querySelector('form');
        form.addEventListener('submit', function(event) {
            event.preventDefault();
        });
    </script>

7、 ... and 、 Mouse events

event An event object is a collection of information about an event , It can be divided into mouse event objects MouseEvent And keyboard event objects KeyboardEvent.

Example ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Mouse events </title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body {
            height: 2000px;
        }
        .box {
            position: fixed;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            margin: 50px;
            background-color: #ff6700;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script>
    var box = document.querySelector('.box')
    box.addEventListener('click', function (event) {
        event = event || window.event;
        // client  It is aimed at the visualization area 
        console.log(event.clientX, event.clientY);
        // page  Is for the page 
        console.log(event.pageX, event.pageY)
        // screen  It is aimed at the computer screen 
        console.log(event.screenX, event.screenY);
    });
</script>
</body>
</html>

原网站

版权声明
本文为[Brother Mengfan]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202211333166653.html