JavaScript事件详解

本文详细介绍了事件处理机制,包括事件句柄的添加与移除、事件流的概念及其两种形式(事件冒泡与事件捕获)、事件对象的使用及如何阻止事件冒泡与默认行为,并通过实例展示了这些概念的应用。

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

 

 

  • 事件句柄
  • 事件流
  • 事件对象

 

事件句柄:

  addEventListener() 方法用于向指定元素添加事件句柄。

  removeEventListener()方法来移除 addEventListener() 方法添加的事件句柄。

优点:

  1. 方便代码修改
  2. 可以添加多个事件
  3. 便于移除事件

 

<button id="b">按钮</button>
<script>
    var b = document.getElementById("b");
    b.addEventListener("click",one);
    b.addEventListener("click",two);

    function one() {
        alert("123");
    }

    function two() {
        alert("456");
    }

</script>

 

 

 

 

事件流

 

事件流描述的是页面中接受事件的顺序,分为事件冒泡和事件捕获

事件冒泡:由最具体的元素接受事件,然后逐级向上传递,直到最不具体的元素节点

事件捕获:和事件冒泡相反,最不具体的元素节点接受,然后逐级传递,直到最具体的元素接受事件

 

举个事件冒泡的例子:

 

<div id="di">
    <button id="btn">按钮</button>
    <a href="http://www.baidu.com" id="ai">百度</a>

</div>




<script>

    var btn = document.getElementById("btn");
    var di = document.getElementById("di");
    var ai = document.getElementById("ai");

    document.getElementById("btn").addEventListener("click",one);
    document.getElementById("di").addEventListener("click",two);
    document.getElementById("ai").addEventListener("click",three);

    function one() {
        alert("one");
    }
    function two() {
        alert("two");
    }
    function three(e) {
        alert("three");
//        e.stopPropagation();
//        e.preventDefault();
    }

</script>

 

 

 

事件对象

 

在出发DOM事件的时候都会产生一个对象

事件对象event:

type:获取事件类型

target:获取事件目标

stopPropagation():阻止事件冒泡

preventDefault():阻止事件默认行为

<div id="di">
    <button id="btn">按钮</button>
    <a href="http://www.baidu.com" id="ai">百度</a>

</div>




<script>

    var btn = document.getElementById("btn");
    var di = document.getElementById("di");
    var ai = document.getElementById("ai");

    document.getElementById("btn").addEventListener("click",one);
    document.getElementById("di").addEventListener("click",two);
    document.getElementById("ai").addEventListener("click",three);

    function one() {
        alert("one");
    }
    function two() {
        alert("two");
    }
    function three(e) {
        alert("three");
        e.stopPropagation();
        e.preventDefault();
    }

</script>

 

 

 

可以看到百度链接已经失去了原来的行为,点击不会跳转到百度页面

 

 

 

 

 

 

  

转载于:https://www.cnblogs.com/lyd447113735/p/8909298.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值