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

最新推荐文章于 2023-10-15 15:21:59 发布

Globalizationa

最新推荐文章于 2023-10-15 15:21:59 发布

阅读量178

点赞数

分类专栏：技术

原文链接：https://www.colorgg.com

版权

技术专栏收录该内容

563 篇文章 14 订阅

订阅专栏

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>