【元素绑定事件的多种写法】

最新推荐文章于 2024-01-16 21:31:26 发布

weixin_51538235

最新推荐文章于 2024-01-16 21:31:26 发布

阅读量167

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_51538235/article/details/125814076

版权

前情了解

在学习前端的过程中，了解到绑定元素的多种写法，各位小伙伴会有点迷茫，小胡就自己目前所了解到汇总一下，欢迎评论区的各位大佬指正~

解决方案

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery.min.js"></script>
</head>

<body>
    <!-- btn1:与html结合 不利于后期维护，不推荐 -->
    <button id="btn1" onclick="alert('btn1成功点击！')">btn1</button>
    <!-- btn2:在js中通过onclick绑定元素，但这种只能绑定一种函数，若是绑定多个函数，会导致前面的函数失效 -->
    <button id="btn2">btn2</button>
    <!-- btn3：在js中通过addEventListener绑定事件监听 -->
    <button id="btn3">btn3</button>
    <!-- btn4：在js中通过attachEvent绑定事件监听 -->
    <button id="btn4">btn4</button>
    <!-- btn5：通过jquery中的click()方法  通过调用某个事件方法，传入事件处理函数来实现的 jQuery的事件和DOM中的事件相比，省略了开头的“on”，如jQuery中的click()对应DOM中的onclick。并且，jQuery的事件方法允许为一个事件绑定多个事件处理函数，只需多次调用事件方法，传入不同的函数即可。-->
    <button id="btn5">btn5</button>
    <!-- btn6：通过jQuery中的on()方法 一次可绑定多个事件 -->
    <button id="btn6">btn6</button>
    <script>
        var btn2 = document.getElementById("btn2");
        btn2.onclick = function () {
            alert('btn2点击成功！')
        }
       var btn3=document.getElementById("btn3")
        btn3.addEventListener('click', function () {
            alert('btn3点击成功！')
        })

        //ie浏览器
        // var btn4= document.getElementById("btn4");
        // btn4.attachEvent('onclick',function(){
        //     alert('btn4点击成功！')
        // })
        $('#btn5').click(function(){
            alert('btn5点击成功！')
        })
        $('#btn6').on('click',function(){
            alert('btn6点击成功！')
        })
    </script>
</body>

</html>