Comparison of three methods of JS event binding

js incident

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        input{
            display: block;
            margin-bottom:10px;
        }
        .active{
            color:orange;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var btn = document.querySelector("#btn");
            //Time handle
            var clickme = function(){
                alert("hello~");
            }
            btn.addEventListener("click", clickme);
        });

    </script>
</head>
<body>

    <button id="btn">Click on me</button>
</body>
</html>

Three methods of event listening:

1. Add events directly to html (not recommended)

Strong coupling, no code reuse

2, DOM 0.

The limit that an element can only bind one event

If multiple events are bound, the latter one will overwrite the former one

2, DOM 2.

Multiple listening functions can be bound to an event

You can also define event capture and event bubbling

btn.addEventListener("click", fn, false); the third parameter is false by default

btn.attachEvent("onclick", fn); event listener function attachEvent of IE

document.body.addEventListener("load", init);

document.body.attachEvent("onload", init);

function init(){}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        input{
            display: block;
            margin-bottom:10px;
        }
        .active{
            color:orange;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            // DOM 0 level
            var btn3 = document.querySelector("#btn3");
            btn3.onclick=function(){
                alert("hello3~");
            }

            var btn4 = document.querySelector("#btn4");
            function click4(){
                alert("hello4~");
            }
            btn4.onclick=click4;


            // DOM 2 level
            var btn5 = document.querySelector("#btn5");
            //Event Handler
            var click5 = function(){
                alert("hello5~");
            }
            //There clickme Brackets are not required
            btn5.addEventListener("click", click5);            

        });
    </script>
</head>
<body>
    <!-- Direct addition HTML Two ways on -->
    <button id="btn1" onclick="alert('hello1~')">Button 1</button>
    <!-- There click1()Parenthesis required -->
    <button id="btn2" onclick="click2()">Button 2</button><br>

    <!-- DOM 0 level -->
    <button id="btn3">Button 3</button>
    <button id="btn4">Button 4</button><br>

    <!-- DOM 2 level -->
    <button id="btn5">Button 5</button>

    <script>
        // All of a sudden, it turns out that this function can only be btn The back, not the front
        // That is the use of domReady No, too.
        function click2(){
            alert("hello2~");
        }
    </script>
</body>
</html>

Keywords: Javascript IE

Added by zohab on Fri, 07 Feb 2020 18:03:25 +0200

Programming VIP

Comparison of three methods of JS event binding

Popular Keywords