JavaScript事件绑定和事件监听的区别

本文探讨了HTML中事件处理机制的区别,包括onclick事件的单次触发特性及其如何被覆盖,以及addEventListener方法支持的多事件监听功能。通过示例说明了不同事件处理方式的工作原理和执行顺序。

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <!--普通事件中的onclick事件只支持单个事件,会被其他onclick事件覆盖,(重点!!!)
        有两种写法:
        一是在标签内写onclick事件
     二是在JS里面写onlicke=function(){}

        事件监听中的addEventListener可以添加多个事件而不用担心被覆盖
        只有一种写法:监听方法
    -->

    <!--第一种写法    不执行-->
    <input id="myButton" type="button" value="点我" onclick="alert('普通事件1');">  

    <script type="text/javascript">
        document.getElementById("myButton").onclick=function () {
            alert('普通事件2');       //第二种写法  会将上面的alert('普通事件1')覆盖  
        }

        //事件监听添加两个事件.  监听可以对同一件事情添加多个监听的事件
        document.getElementById("myButton").addEventListener('click', a);  
        document.getElementById("myButton").addEventListener('click', b);  //不能用onclick
        function  a() {
            alert('事件监听1');  //执行
        }
        function  b() {
            alert('事件监听2');//执行
        }
    </script>
</body>
</html>

这里顺便提一下addEventListener这个函数
函数原型:addEventListener(event, function, useCapture),重点是第三个参数,这个参数设置了事件的传递类型,默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。
如下图:
这里写图片描述

再举一个栗子:


document.addEventListener('click',functiona(){ },false) ;
document.addEventListener('click',functionb(){ },false) ;
<div onclick="functionb">
    <div onclick = "functiona">
           点击先触发哪个事件?
    </div>
</div>
点击文本两个div事件同时响应,此时先后顺序是:
如果为false 则阻止捕获,先响应functiona,在响应functionb,否则,响应顺序相反。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值