JavaScript Event学习第五章高级事件注册模型

2023年6月10日下午1:20 • JavaScript

下面我将详细讲解“JavaScript Event学习第五章高级事件注册模型”的完整攻略。

前言

在Javascript中，事件注册是非常重要的一个部分，它可以让我们通过操作DOM元素，来响应用户的各种行为，比如点击、移动、滚动等。而高级事件注册模型则为我们提供了更为灵活的事件注册方式，可以灵活的控制事件的冒泡和捕获。下面是该模型的具体使用方法。

高级事件注册模型

在DOM标准中，事件传播包含两个阶段，分别是捕获阶段和冒泡阶段。而在高级事件注册模型中，我们可以通过addEventListener()函数，来控制事件的响应阶段。该函数的使用方法如下：

target.addEventListener(type, listener, useCapture);

其中，target表示要绑定事件的DOM元素，type表示要绑定的事件名称，listener表示对应的事件处理函数，useCapture表示是否在捕获阶段触发事件，如果为true则开启，反之则关闭。

比如，我们可以对一个按钮进行如下绑定：

<button id="myBtn">点我一下</button>

let btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
    console.log("Hello world!");
}, false);

这样一来，在点击按钮之后，控制台上就会输出"Hello world!"。

示例说明

下面我们通过两个示例来说明高级事件注册模型的具体运用。

示例一：阻止事件冒泡

有时候，我们需要在一个容器内绑定多个元素，而每个元素都有对应的事件响应函数，这个时候就需要注意事件冒泡的问题，否则可能出现冲突、误触等问题。

比如，我们有如下的HTML代码：

<div id="container">
    <button id="btn">按钮</button>
    <a href="https://www.baidu.com">百度一下</a>
</div>

我们需要在按钮和超链接上绑定事件，实现点击会分别输出“点击按钮”和“点击超链接”

let container = document.getElementById("container");
let btn = document.getElementById("btn");
let link = document.getElementsByTagName("a")[0];

container.addEventListener("click", function(){
    console.log("点击容器");
}, false);

btn.addEventListener("click", function(event){
    event.stopPropagation(); // 阻止事件冒泡
    console.log("点击按钮");
}, false);

link.addEventListener("click", function(event){
    event.stopPropagation(); // 阻止事件冒泡
    console.log("点击超链接");
}, false);

在这个例子中，我们在按钮和超链接上通过event.stopPropagation()来阻止事件冒泡，确保只会输出各自的消息。

示例二：事件委托

在有多个元素时，我们可能再也不需要为每个元素单独绑定事件处理函数了——这就是事件委托的特殊方法。

事件委托是指将事件处理程序添加到父级元素而不是将它们添加到每个子元素中。事件委托利用事件冒泡将与事件相关的信息传播到父元素。

比如，我们有如下的HTML代码：

<ul id="menu">
    <li>菜单1</li>
    <li>菜单2</li>
    <li>菜单3</li>
</ul>

我们需要在每个菜单上绑定事件，实现点击会输出“点击菜单N”

let menu = document.getElementById("menu");

menu.addEventListener("click", function(event){
    let target = event.target;
    if(target.tagName.toLowerCase() === "li"){
        console.log(`点击菜单${target.innerText}`);
    }
}, false);

在这个例子中，我们通过event.target来获取事件的触发元素，判断其tagName是否为li，确保只会输出菜单的消息。