js事件绑定的方法

废话不多少，直接上代码

第一种

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

第二种

<body>
    <div style="width:400px;height:400px;background:blueviolet"></div>
    <script>
    let div = document.querySelectorAll("div")[0];
    div.onclick = function(){
        console.log("第二种")
    }
    </script>
</body>

第一种和第二种方法同一对象只能添加一个事件

第三种

<body>
    <div style="width: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="width:400px;height:400px;background:blueviolet"></div>
    <script>
    let div = document.querySelectorAll("div")[0];
    div.addEventListener("click",function(){//注意事件名称不带on
        console.log("第四种")
    })
    </script>
</body>

注意此种方法不支持IE8及其以下版本
此种方法可以为同一对象添加多个事件

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

posted @ 2017-05-14 19:38  郑闯  阅读(227)  评论(0)  编辑  收藏  举报