JavaScript笔记41_事件的绑定

最新推荐文章于 2024-12-15 15:15:00 发布

原创最新推荐文章于 2024-12-15 15:15:00 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端html笔记专栏收录该内容

59 篇文章

订阅专栏

本文介绍了在Web开发中如何使用传统的方法和addEventListener()为DOM元素绑定事件处理函数，并演示了如何实现为同一元素的同一事件绑定多个不同的处理函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件的绑定：使用“对象.事件=函数”的形式绑定响应函数；只能同时为一个元素的一个事件绑定一个函数；不能绑定多个，如果绑定了多个，则后面的会覆盖掉前面的；
————————————————
addEventListener()；通过这个方法也可以为元素绑定响应函数
参数：
1.事件的字符串，不要on
2.回调函数，当事件触发时，该函数会被调用
3.是否在捕获阶段触发事件，需要一个布尔值，一般都穿false

btn01.addEventListener("click",function(){},false);

完整代码：

<script>
       window.onload=function(){
        var btn01=document.getElementById("btn01")
        // btn01.οnclick=function(){
        //     alert("1")
        // }
        //使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
        //这样当事件被触发时，响应函数将会按照函数的绑定顺序执行。
        btn01.addEventListener("click",function(){
            alert(1)
        },false);
        btn01.addEventListener("click",function(){
            alert(2)
        },false);
        btn01.addEventListener("click",function(){
            alert(3)
        },false);
       };
    </script>
</head>
<body>
    <button id="btn01">点我</button>
</body>