DOM中事件绑定的三种形式

最新推荐文章于 2023-05-12 21:28:28 发布

前端神棍

最新推荐文章于 2023-05-12 21:28:28 发布

阅读量353

点赞数

分类专栏： JS 文章标签： js javascript dom

本文链接：https://blog.csdn.net/m0_46412825/article/details/107621524

版权

JS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

在DOM中，事件绑定有三种形式：
1）html级别的事件绑定把事件当成了标签的属性
<button onclick="alert('hello')">点击</button> <button onclick="fn()">点击</button>
为什么上面的 οnclick=“fn()”？
因为它内部会在外面包一层函数，如下：

 onclick = function(){
        fn();
    }

2）dom0级别的事件绑定
eye.onclick = function(){}
就是给onclick属性赋值
只能给相同的事件赋一个值，如果再赋值的话，后面的就会覆盖前面的值。
问DOM0级别事件绑定的原理：给属性赋值
3）dom2级别的事件绑定推荐使用它
eye.addEventListener("click",function () {})
基于事件池机制，可以给事件源绑定多个相同的事件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }

        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }

        .box img {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/close.png" id="eye" alt="">
        <input type="password" id="pwd">
        <!-- html级别的事件绑定-->
        <!-- <button οnclick="alert('hello')">点击</button>-->
    </div>
    <script>
        var eye = document.getElementById("eye");
        var pwd = document.getElementById("pwd");
        // eye.onclick = function(){} // dom0级别的事件绑定

        // let flag = true;
        let flag = 1;

        eye.addEventListener("click",function () {  // dom2级别的事件绑定
            if(flag){
                eye.src = "./images/open.png"
                pwd.type = "text"
                // flag = false;
                flag = 0;
            }else{
                eye.src = "./images/close.png"
                pwd.type = "password"
                // flag = true;
                flag = 1;
            }
        })
    </script>
</body>
</html>