JS事件绑定的三种方式比较

Posted 2021-03-11 chenyingying0

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS事件绑定的三种方式比较相关的知识，希望对你有一定的参考价值。

js事件

<!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");
            //时间句柄
            var clickme = function(){
                alert("hello~");
            }
            btn.addEventListener("click", clickme);
        });

    </script>
</head>
<body>

    <button id="btn">点击我</button>
</body>
</html>

技术图片

事件监听的三种方法：

1、直接在html上添加事件（不建议）

强耦合，不利用代码复用

2、DOM 0级

一个元素只能绑定一个事件的限制

如果绑定了多个事件，后面的会覆盖掉前面的

2、DOM 2级

一个事件可以绑定多个监听函数

还可以定义事件捕获和事件冒泡

btn.addEventListener("click", fn, false); 第三个参数默认是false

btn.attachEvent("onclick", fn); IE的事件监听函数attachEvent

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级
            var btn3 = document.querySelector("#btn3");
            btn3.onclick=function(){
                alert("hello3~");
            }

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


            // DOM 2级
            var btn5 = document.querySelector("#btn5");
            //事件句柄
            var click5 = function(){
                alert("hello5~");
            }
            //这里的clickme不需要加括号
            btn5.addEventListener("click", click5);            

        });
    </script>
</head>
<body>
    <!-- 直接加在HTML上的两种方式 -->
    <button id="btn1" onclick="alert(‘hello1~‘)">按钮1</button>
    <!-- 这里的click1()需要加括号 -->
    <button id="btn2" onclick="click2()">按钮2</button><br>

    <!-- DOM 0级 -->
    <button id="btn3">按钮3</button>
    <button id="btn4">按钮4</button><br>

    <!-- DOM 2级 -->
    <button id="btn5">按钮5</button>

    <script>
        // 突然发现这个函数只能在btn的后面，而不能在前面
        // 即使用了domReady也不行哎
        function click2(){
            alert("hello2~");
        }
    </script>
</body>
</html>

以上是关于JS事件绑定的三种方式比较的主要内容，如果未能解决你的问题，请参考以下文章