事件【JavaScript】

news2024/9/24 21:06:13

1. 事件

事件是用户或浏览器动作的表示，JavaScript 中的一切交互都是通过事件来处理的。

2. 事件冒泡（Event Bubbling）

事件冒泡是指事件从最具体的元素（即触发事件的元素）开始触发，然后逐级向上传播到较为不具体的元素（即该元素的父元素、祖先元素），直到到达最顶层的元素（通常是document对象）或某个阶段的处理函数决定停止冒泡。在冒泡过程中，每个元素都有机会处理这个事件。

例如，如果你在一个按钮（button）内部点击，点击事件会首先在按钮上触发，然后冒泡到包含按钮的父元素，再到更上一级的祖先元素，以此类推。

3. 事件捕获（Event Capturing）

事件捕获与事件冒泡相反，它是指事件从最顶层的元素开始触发，然后逐级向下传播到更具体的元素，直到到达触发事件的元素。在捕获过程中，同样每个元素都有机会处理这个事件。

在事件捕获阶段，事件首先由document对象处理，然后传递给document的子元素，依次类推，直到到达实际触发事件的元素。

4. 事件流

当在DOM中触发一个事件时，这个事件并不是仅在其发生源元素上触发一次，而是会经历一个完整的事件流过程。这个过程分为三个阶段：捕获阶段、目标阶段和冒泡阶段。

  1. 捕获阶段：事件从document对象开始，按照DOM树的结构向下传播，直到到达触发事件的元素。

  2. 目标阶段：事件到达了触发事件的元素，此时会触发该元素上的事件处理函数。

  3. 冒泡阶段：事件从触发事件的元素开始，按照DOM树的结构向上冒泡，直到到达document对象或某个处理函数通过调用event.stopPropagation()方法阻止了冒泡。

在大多数情况下，事件冒泡更为常用，因为它允许开发者利用事件委托（Event Delegation）技术，即在一个父元素上设置事件监听器来处理其子元素触发的事件，从而减少需要添加的事件监听器的数量。而事件捕获在某些特定场景下也很有用，比如当需要在事件到达目标元素之前进行预处理时。

如何使用：

在JavaScript中，你可以使用addEventListener方法来为DOM元素添加事件监听器，并通过设置该方法的第三个参数来决定是在捕获阶段还是冒泡阶段处理事件。如果设置为true，则在捕获阶段处理事件；如果设置为false或省略，则在冒泡阶段处理事件。例如：

// 在冒泡阶段处理点击事件
element.addEventListener('click', function(event) {
  // 处理逻辑
}, false); // 或者省略第三个参数

// 在捕获阶段处理点击事件
element.addEventListener('click', function(event) {
  // 处理逻辑
}, true);

5. 事件处理程序：

事件处理程序用于处理用户与网页元素的交互，比如点击、输入、移动鼠标等。

5.1 HTML事件处理程序

HTML事件处理程序是通过在HTML标签内使用事件属性（比如onclick、onmouseover等）来定义的。以下是一个简单的例子：

<button onclick="alert('按钮被点击了！')">点击我</button>

在这个例子中，点击按钮时，会弹出一个警告框。

优点：

  • 使用简单直观，适合小型项目。

缺点：

  • 不易维护，代码与结构混杂在一起，可能导致不便于管理和调试。

5.2 DOM0级事件处理程序

DOM0级事件处理程序是在JavaScript中通过直接将函数赋值给 DOM 元素的事件属性来实现的。如下所示：

<button id="myButton">点击我</button>
<script>
    document.getElementById('myButton').onclick = function() {
        alert('按钮被点击了！');
    };
</script>

优点：

  • 代码与结构分离，提升了可读性和维护性。

缺点：

  • 只支持一个事件处理程序，后面设置的会覆盖前面的。

5.3 DOM2级事件处理程序（建议使用）

DOM2级事件处理程序使用 addEventListener 方法为指定的对象添加事件监听器，支持多个事件处理函数。例子如下：

<button id="myButton">点击我</button>
<script>
    var button = document.getElementById('myButton');
    button.addEventListener('click', function() {
        alert('按钮被点击了！');
    });
    button.addEventListener('click', function() {
        console.log('另一个处理程序');
    });
</script>

优点：

  • 支持多个事件处理程序，既不覆盖前面的处理程序，又能灵活处理不同的事件类型。
  • 可以更好地管理事件的捕获与冒泡。

缺点：

  • 不支持 IE8 及更早的浏览器。

5.4 IE事件处理程序

IE事件处理程序是特定于 Internet Explorer 的事件处理方式，通常使用 attachEvent 方法。例子如下：

<button id="myButton">点击我</button>
<script>
    var button = document.getElementById('myButton');
    button.attachEvent('onclick', function() {
        alert('按钮被点击了！');
    });
</script>

优点：

  • 在 IE 早期版本中可用，为开发者提供了一种处理事件的方式。

缺点：

  • 语法和DOM标准不一致，难以与其他浏览器兼容。
  • 不支持事件捕获。
  • 只能添加一个事件处理程序，后添加的会覆盖之前的。

6. 事件相关的示例

6.1 如何获取事件对象

在JavaScript中，事件对象提供有关事件的信息，例如事件类型、目标元素等。可以通过事件处理函数的参数来获取该对象。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>获取事件对象示例</title>
</head>
<body>
    <button id="myButton">点击我</button>

    <script>
        document.getElementById('myButton').addEventListener('click', function(event) {
            console.log(event); // 输出事件对象
            console.log('事件类型:', event.type); // 输出事件类型
        });
    </script>
</body>
</html>

在这个例子中，当按钮被点击时，事件对象将被传递并输出到控制台。

6.2 事件目标

事件目标是指触发事件的实际元素。可以通过事件对象的 target 属性访问事件目标。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>事件目标示例</title>
</head>
<body>
    <div>
        <button class="btn">按钮 1</button>
        <button class="btn">按钮 2</button>
    </div>

    <script>
        const buttons = document.querySelectorAll('.btn');
        buttons.forEach(button => {
            button.addEventListener('click', function(event) {
                console.log('事件目标:', event.target); // 输出被点击的按钮
            });
        });
    </script>
</body>
</html>

在这个例子中，单击任意按钮时，控制台将输出被点击按钮的引用。

6.3 事件代理

事件代理是一种将事件处理程序绑定到父元素而不是直接绑定到目标元素上的技术。它利用事件冒泡特性来处理子元素的事件，这样可以在动态添加子元素时无需重新绑定事件。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>事件代理示例</title>
</head>
<body>
    <ul id="myList">
        <li>项 1</li>
        <li>项 2</li>
    </ul>
    <button id="addItem">添加项</button>

    <script>
        // 列表的事件代理
        document.getElementById('myList').addEventListener('click', function(event) {
            if (event.target.tagName === 'LI') {
                alert('点击了: ' + event.target.innerText); // 输出被点击的列表项文本
            }
        });

        // 动态添加列表项
        document.getElementById('addItem').addEventListener('click', function() {
            const newItem = document.createElement('li');
            newItem.textContent = '新项';
            document.getElementById('myList').appendChild(newItem);
        });
    </script>
</body>
</html>

在这个例子中，无论是已经存在的列表项还是动态添加的列表项，点击时都能触发事件处理程序。

6.4 事件冒泡

事件冒泡指的是事件从事件目标向上冒泡，触发其祖先元素上的事件处理程序。可以通过设置事件的 stopPropagation() 方法来阻止事件继续冒泡。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡示例</title>
</head>
<body>
    <div id="parent" style="border: 1px solid #001;">
        <button id="child">点击我</button>
    </div>

    <script>
        document.getElementById('parent').addEventListener('click', function() {
            console.log('父元素被点击');
        });

        document.getElementById('child').addEventListener('click', function(event) {
            console.log('子元素被点击');
            event.stopPropagation(); // 阻止事件冒泡
        });
    </script>
</body>
</html>

在这个例子中，点击子元素按钮只会输出“子元素被点击”，而不会触发父元素的点击事件。

6.5 事件流阶段 eventPhase

eventPhase属性用于指示事件当前位于事件流的哪个阶段。值为：

  • 1：捕获阶段（事件正在捕获）
  • 2：目标阶段（事件到达目标元素）
  • 3：冒泡阶段（事件正向上冒泡）

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>事件流阶段示例</title>
</head>
<body>
    <div id="parent" style="border: 1px solid #001;">
        <button id="child">点击我</button>
    </div>

    <script>
        document.getElementById('parent').addEventListener('click', function(event) {
            console.log('父元素的 eventPhase:', event.eventPhase);
        }, true); // 捕获阶段

        document.getElementById('child').addEventListener('click', function(event) {
            console.log('子元素的 eventPhase:', event.eventPhase);
        });
    </script>
</body>
</html>

在这个例子中，当点击按钮时，控制台将输出事件在父元素和子元素中的流阶段信息。

6.6 取消默认事件

可以通过event.preventDefault()方法取消事件的默认行为，例如阻止链接跳转或表单提交。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>取消默认事件示例</title>
</head>
<body>
    <a href="https://www.example.com" id="myLink">点击我</a>

    <script>
        document.getElementById('myLink').addEventListener('click', function(event) {
            event.preventDefault(); // 取消链接的默认跳转行为
            alert('链接被点击，但不会跳转!'); 
        });
    </script>
</body>
</html>

在这个例子中，当点击链接时，通过preventDefault()方法阻止了页面的跳转，同时弹出提示框。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2161424.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

LVGL 控件之消息框（lv_msgbox）

LVGL 控件之消息框（lv_msgbox）

目录 一、概述二、消息框1、创建消息框2、获取消息框的组成部分3、关闭消息框部件4、消息框部件事件5、API 函数 一、概述 消息框部件是由多个小部件构建而成的&#xff0c;包括&#xff1a;lv_obj、lv_btn、lv_label 和 lv_btnmatrix 部件&#xff0c;示意图如下所示&#xf…
阅读更多...
错误使用排序导致分页数据重复

错误使用排序导致分页数据重复

1. 现象 分页返回数据的时候&#xff0c;发现第一页和第二页的数据有重复的&#xff0c;如姓名中的“某颖文”在第一和和第二页都显示了。 第一页&#xff1a; 第二页&#xff1a; 2. 原因 因为排序的的字段为“departmentCode”&#xff0c;该字段是重复不唯一的&#xff0…
阅读更多...
GPIO之EMIO按键控制LED——ZYNQ学习笔记3

GPIO之EMIO按键控制LED——ZYNQ学习笔记3

一、EMIO简介 ZYNQ GPIO 接口信号被分成四组&#xff0c;分别是从 BANK0 到 BANK3。其中 BANK0 和 BANK1 中共计 54个信号通过 MIO 连接到 ZYNQ 器件的引脚上&#xff0c;这些引脚属于 PS 端&#xff1b; 而 BANK2 和 BANK3 中共计 64 个信号则通过 EMIO 连接到了 ZYNQ 器件的 …
阅读更多...
Spring Security学习

Spring Security学习

系列文章目录 第一章 基础知识、数据类型学习 第二章 万年历项目 第三章 代码逻辑训练习题 第四章 方法、数组学习 第五章 图书管理系统项目 第六章 面向对象编程&#xff1a;封装、继承、多态学习 第七章 封装继承多态习题 第八章 常用类、包装类、异常处理机制学习 第九章 集…
阅读更多...
吸烟行为检测、重点区域吸烟检测、吸烟检测算法样本标注

吸烟行为检测、重点区域吸烟检测、吸烟检测算法样本标注

吸烟检测算法主要用于公共场所、工作场所和家庭环境中的吸烟行为监控&#xff0c;通过图像识别技术来检测和识别吸烟行为&#xff0c;以确保环境卫生和公共安全。这种技术可以帮助管理者实时监控吸烟行为&#xff0c;及时采取措施&#xff0c;减少二手烟的危害。 一、技术实现…
阅读更多...
短视频矩阵源码/短视频矩阵系统搭建/源码开发知识分享

短视频矩阵源码/短视频矩阵系统搭建/源码开发知识分享

集星云推智剪获客系统&#xff0c;通过自主研发的高效发布模式&#xff0c;为企业提供稳定的接口与自动化操作&#xff0c;助力企业实现短视频矩阵的构建。该系统整合了十大核心功能&#xff0c;包括AI辅助文案撰写、视频剪辑、智能去重、内容拆分、文字转语音、文本提取、批量…
阅读更多...
2024源代码加密软件TOP10分享｜企业源代码加密软件

2024源代码加密软件TOP10分享｜企业源代码加密软件

在现代企业的数字化转型过程中&#xff0c;源代码作为企业核心知识产权之一&#xff0c;至关重要。为了防止数据泄漏、外部攻击以及内部违规操作&#xff0c;企业越来越关注源代码的加密和保护。本文将为大家介绍2024年最受欢迎的十大源代码加密软件&#xff0c;帮助企业更好地…
阅读更多...
【信息论基础第三讲】再谈离散信源的信息测度之熵的性质多符号信源的信息测度

【信息论基础第三讲】再谈离散信源的信息测度之熵的性质多符号信源的信息测度

一、Piece Of Cake 1、离散信源X的熵是H(X)是一个常数而不是一个变量 解释&#xff1a;离散信源的熵也就是自信息I(X)的数学期望&#xff0c;即H(X) E[I(Xi)]&#xff0c;而通过概率论的知识我们知道数学期望是一个常数&#xff0c;故熵也是一个常数。 2、八元编码系统&…
阅读更多...
音频3A——初步了解音频3A

音频3A——初步了解音频3A

文章目录 前言一、3A使用的场景和原理1.AEC2.AGC3.ANS/ANR4.硬件3A和软件3A的区别1&#xff09;层级不同2&#xff09;处理顺序不同3&#xff09;优缺点 5.处理过程 二、3A带来的问题三、开源3A算法总结 前言 在日常的音视频通话过程中&#xff0c;说话的双端往往会面对比较复…
阅读更多...
【后端开发】JavaEE初阶—线程安全问题与加锁原理（超详解）

【后端开发】JavaEE初阶—线程安全问题与加锁原理（超详解）

前言&#xff1a; &#x1f308;上期博客&#xff1a;【后端开发】JavaEE初阶—Theard类及常见方法—线程的操作&#xff08;超详解&#xff09;-CSDN博客 &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 &#x1f308;小编会在后端开发的学习中不…
阅读更多...
综合体第三题（DHCP报文分析）

综合体第三题（DHCP报文分析）

DHCP&#xff08;一般情况下&#xff09; 某公司网络DHCP服务器地址为192.168.0.2&#xff0c;可分配IP地址为192.168.0.6-192.168.0.254&#xff0c;缺省网关的地址为192.168.0.1&#xff0c;DNS服务器地址为192.168.0.2。网络中某客户机从服务器获取IP地址后&#xff0c;在客…
阅读更多...
初识爬虫8

初识爬虫8

1.selenium的作用和工作原理 2. 使用selenium&#xff0c;完成web浏览器调用 # -*- coding: utf-8 -*- # 自动化测试工具&#xff0c;降低难度&#xff0c;性能也降低 from selenium import webdriverdriver webdriver.Edge()driver.get("https://www.itcast.cn/")…
阅读更多...
Python语言基础教程（上）4.0

Python语言基础教程（上）4.0

✨博客主页&#xff1a; https://blog.csdn.net/m0_63815035?typeblog &#x1f497;《博客内容》&#xff1a;.NET、Java.测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识 &#x1f4e2;博客专栏&#xff1a; https://blog.csdn.net/m0_63815035/cat…
阅读更多...
新规2027年生效 美国禁止中国智能网联汽车软硬件

新规2027年生效 美国禁止中国智能网联汽车软硬件

当地时间9月23日&#xff0c;美国商务部工业和安全局&#xff08;BIS&#xff09;发布了一项拟议规则制定通知&#xff08;NPRM&#xff09;&#xff0c;该通知将禁止销售或进口集成特定硬件和软件的联网车辆&#xff0c;或单独销售这些组件&#xff0c;这些硬件和软件与中国或…
阅读更多...
增强网络威胁防御能力的云安全新兴技术

增强网络威胁防御能力的云安全新兴技术

一些行业专家强调了基于云的运营的独特网络安全需求&#xff0c;并指出保护敏感数据与传统的本地网络不同。尽管新兴技术并没有改变网络安全专业人员与犯罪分子之间持续的斗争&#xff0c;但它们提高了赌注&#xff0c;使斗争变得更加复杂。 如今&#xff0c;我们面对的是技术…
阅读更多...
CSS | 如何来避免 FOUC(无样式内容闪烁)现象的发生?

CSS | 如何来避免 FOUC(无样式内容闪烁)现象的发生?

一、什么是 FOUC(无样式内容闪烁)? ‌FOUC&#xff08;Flash of Unstyled Content&#xff09;是指网页在加载过程中&#xff0c;由于CSS样式加载延迟或加载顺序不当&#xff0c;导致页面出现闪烁或呈现出未样式化的内容的现象。‌ 这种现象通常发生在HTML文档已经加载&…
阅读更多...
为什么数据需要 QA 流程

为什么数据需要 QA 流程

当有人问我做什么工作时&#xff0c;我会说我是一名数据质量保证 (QA) 工程师。他们并不真正理解我的意思。“嗯&#xff0c;我做数据测试&#xff0c;”我试图解释&#xff0c;但常常无济于事。我有一些从事技术和软件开发的朋友&#xff0c;他们不太了解数据测试是什么&#…
阅读更多...
[LLM 学习笔记] Transformer 基础

[LLM 学习笔记] Transformer 基础

Transformer 基础 Transformer 模型架构 主要组成: Encoder, Decoder, Generator. Encoder (编码器) 由 N N N 层结构相同(参数不同)的 EncoderLayer 网络组成. In : [ b a t c h _ s z , s e q _ l e n , d m o d e l ] \textbf{In}: [batch\_sz, seq\_len, d_{model}] I…
阅读更多...
【WorldView系列卫星】

【WorldView系列卫星】

WorldView系列卫星 WorldView系列卫星是美国DigitalGlobe公司推出的一系列先进商业遥感卫星&#xff0c;旨在提供高分辨率的地球成像服务。该系列卫星以其卓越的成像能力&#xff0c;如高分辨率、快速重访时间和宽幅扫描能力&#xff0c;引领了地球观测技术的新标准。以下是对…
阅读更多...
LCD1602

LCD1602

LCD1602 是一种工业字符型液晶显示屏&#xff0c;能够同时显示 16x2 即 32 个字符。 LCD的显示控制 通过向 LCD1602 发送指令和数据来控制其显示内容。指令包括清屏、设置光标位置、显示模式等&#xff1b;数据则是要显示的字符的 ASCII 码。LCD1602 内部有一个控制器&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023