JavaScript事件详解-优快云博客

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

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

事件句柄
事件流
事件对象

事件句柄：

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

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

优点：

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

<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>