On Javascript events

Event grading

DOM 0 ,DOM 2,DOM 3

//DOM0
element.onclick = function (){}
//DOM2
element.addEventListener("click",function(){},false)
//DOM3
element.addEventListener("keyup",function(){},false)

The last parameter is capture (true) and bubble (false). The default is false bubble

DOM event types: bubbling and capturing

Bubbling is from
window→document→html→body→div→text
Capture is from
window←document←html←body←div←text
Where html is obtained by using document.documentElement

DOM event api

event.preventDefault() //Block default events
event.stopPropagation()  //Stop bubbles
event.stopImmediatePropagation() //Official explanation. Prevents calls to other listeners for the same event.
event.currentTarget()  //Event agent
event.target.  //Block default events

event.preventDefault()

Block default events

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>event.preventDefault()</title>
</head>
<body>
    <p>Please click the check box control</p>
    <form>
        <label for="id-checkbox">Checkbox</label>
        <input type="checkbox" id="id-checkbox" name="checkbox" />
    </form>
    <script>
        document.querySelector("#id-checkbox").addEventListener("click", function(event){
            event.preventDefault();  //Prevent this check box from being checked
            setTimeout(function (){
              alert("preventDefault Will prevent the check box from being checked.")
            },0)
        }, false);
    </script>
</body>
</html>

This event will be triggered when you choose and will not be selected

stopImmediatePropagation()

If an element has multiple event listening functions of the same type, when the event of that type is triggered, multiple event listening functions will be executed in sequence. If a listening function executes the event.stopImmediatePropagation() method, in addition to the event's bubbling behavior being blocked (the function of the event.stopPropagation method), The execution of the listener function of the same type of event in the subsequent sequence bound by this element will also be blocked

<!DOCTYPE html>
<html>
    <head>
        <style>
            p { height: 30px; width: 150px; background-color: #ccf; }
            div {height: 30px; width: 150px; background-color: #cfc; }
        </style>
    </head>
    <body>
        <div>
            <p>paragraph</p>
        </div>
        <script>
            document.querySelector("p").addEventListener("click", function(event)
            {
                alert("I am p First listening function bound on element");
            }, false);
            document.querySelector("p").addEventListener("click", function(event)
            {
                alert("I am p Second listening function bound on element");
                event.stopImmediatePropagation();
                //Execute the stopImmediatePropagation method to prevent the click event from bubbling, and
                //Prevents the execution of event listener functions for other click events bound on the p element
            }, false);
            document.querySelector("p").addEventListener("click", function(event)
            {
                alert("I am p Third listening function bound on element");
                //This listening function is next to the previous one and will not be executed
            }, false);
            document.querySelector("div").addEventListener("click", function(event)
            {
                alert("I am div element,I am p The upper element of an element");
                //The click event of the p element does not bubble up and the function will not be executed
            }, false);
        </script>
    </body>
</html>

Posted by fwegan on Sat, 04 Apr 2020 20:40:58 -0700

Programmer Group