zoukankan      html  css  js  c++  java
  • js事件绑定的方法

    废话不多少,直接上代码

    第一种

    <body>
        <div style="400px;height:400px;background:blueviolet" onclick="click()"></div>
        <script>
        function click(){
            console.log("第一种")
        }
        </script>
    </body>
    

    第二种

    <body>
        <div style="400px;height:400px;background:blueviolet"></div>
        <script>
        let div = document.querySelectorAll("div")[0];
        div.onclick = function(){
            console.log("第二种")
        }
        </script>
    </body>
    
    第一种和第二种方法同一对象只能添加一个事件
    

    第三种

    <body>
        <div style="400px;height:400px;background:blueviolet"></div>
        <script>
        let div = document.querySelectorAll("div")[0];
        div.attachEvent("onclick",function(){//此处要带"on"
            console.log("第三种")
        })
        </script>
    </body>
    
    仅IE8及以下版本支持
    此种方法可以为同一对象添加多个事件
    

    第四种

    <body>
        <div style="400px;height:400px;background:blueviolet"></div>
        <script>
        let div = document.querySelectorAll("div")[0];
        div.addEventListener("click",function(){//注意事件名称不带on
            console.log("第四种")
        })
        </script>
    </body>
    
    注意此种方法不支持IE8及其以下版本
    此种方法可以为同一对象添加多个事件
    

    反正我就爱用第四种,你们爱咋滴咋滴

  • 相关阅读:
    联考20200520 T2 函数
    联考20200520 T1 石子游戏
    模拟赛T2 中继系统
    模拟赛T2 仙人掌毒题
    BZOJ3462 DZY Loves Math II
    20200129模拟赛T1 string
    BZOJ1316 树上的询问
    BZOJ4559 成绩比较
    JZOJ4238 纪念碑
    BZOJ 2648 世界树
  • 原文地址:https://www.cnblogs.com/zheng-chuang/p/6853503.html
Copyright © 2011-2022 走看看