详解JavaScript中的事件流和事件处理程序

详解JavaScript中的事件流和事件处理程序

JavaScript中的事件是指用户与网页进行交互时所产生的所有动作,比如鼠标点击、键盘敲击、窗口滚动等等。JavaScript需要对这些事件进行处理,而事件的类型和顺序则由事件流来控制。本篇文章将详细介绍JavaScript中的事件流和事件处理程序,并提供示例说明。

事件流

事件流描述的是从页面中接收事件的顺序。

事件冒泡

事件冒泡指的是事件从最深层的元素开始,逐步向上传递到父元素,直到传递到最外层的元素。比如,当一个用户单击了一个按钮时,这个单击事件会从按钮开始传递到父元素,直至传递到文档的根节点。

针对事件冒泡,我们可以通过addEventListener方法来为HTML元素添加事件监听器,当事件到达子元素后,默认情况下会沿着父元素一直冒泡到文档根节点。

// 给button元素添加单击事件监听器
const button = document.getElementById('button');
button.addEventListener('click', () => {
  console.log('Button clicked');
});

事件捕获

事件捕获是指事件从最外层的元素开始,逐渐向下传递到最深层的元素的过程。比如,当一个用户单击了一个按钮时,这个单击事件会从文档根节点开始,传递到按钮元素。

针对事件捕获,同样可以通过addEventListener方法来为HTML元素添加事件监听器,当事件捕获到父元素后,会沿着事件的传递路径依次进行捕获。

// 向文档根节点添加事件监听器,事件捕获
document.addEventListener('click', () => {
  console.log('Document clicked');
}, true);

DOM事件流

DOM事件流包括三个阶段:事件捕获阶段、目标元素阶段和事件冒泡阶段。

// 给button元素同时添加事件监听器,捕获和冒泡两个阶段
const button = document.getElementById('button');
button.addEventListener('click', () => {
  console.log('Button clicked - Target phase');
}, false);
button.addEventListener('click', () => {
  console.log('Button clicked - Bubbling phase');
}, true);

事件处理程序

事件处理程序指的是处理事件的函数,可以通过三种方式来定义和使用。

HTML事件处理程序

HTML事件处理程序指的是直接在HTML元素中通过on属性来定义事件处理程序。

<!-- 在button元素中直接定义单击事件处理程序 -->
<button onclick="alert('Button clicked')">Click me</button>

虽然使用HTML事件处理程序很方便,但是会给 HTML 元素添加固有的事件处理程序,使代码变得混乱不易维护,不推荐使用。

DOM0级事件处理程序

DOM0级事件处理程序指的是在JavaScript代码中直接为HTML元素绑定事件处理程序。

// 直接为button元素添加单击事件处理程序
const button = document.getElementById('button');
button.onclick = function() {
  console.log('Button clicked');
};

DOM0级事件处理程序看似出现过时,但实际上在某些情况下它是很有用处的。但需要注意的是,采用这种方式绑定的事件处理程序是无法移除的,可以改为使用addEventListener方法添加事件监听器。

DOM2级事件处理程序

DOM2级事件处理程序指的是通过addEventListener方法为HTML元素添加事件监听器。

// 给button元素添加单击事件监听器
const button = document.getElementById('button');
button.addEventListener('click', () => {
  console.log('Button clicked');
});

和DOM0级事件处理程序相比,DOM2级事件处理程序具有更好的兼容性和灵活性,事件处理程序也可以很容易地被移除。

示例1:事件冒泡和事件捕获

<div id="outer">
  <div id="inner">Click me</div>
</div>
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
outer.addEventListener('click', () => {
  console.log('Outer clicked - Bubbling phase');
}, true);
outer.addEventListener('click', () => {
  console.log('Outer clicked - Target phase');
}, false);
inner.addEventListener('click', () => {
  console.log('Inner clicked - Bubbling phase');
}, true);
inner.addEventListener('click', () => {
  console.log('Inner clicked - Target phase');
}, false);

输出结果:

Inner clicked - Target phase
Inner clicked - Bubbling phase
Outer clicked - Bubbling phase

示例2:取消冒泡

<div id="outer">
  <div id="inner">Click me</div>
</div>
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
outer.addEventListener('click', () => {
  console.log('Outer clicked');
}, false);
inner.addEventListener('click', (event) => {
  console.log('Inner clicked');
  event.stopPropagation(); // 禁止事件继续冒泡
}, false);

当点击内层元素时,输出结果为Inner clicked,并且事件不会冒泡到外层元素。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解JavaScript中的事件流和事件处理程序 - Python技术站

(0)
上一篇 2023年5月18日
下一篇 2023年5月18日

相关文章

  • js变量、作用域及内存详解

    JS变量、作用域及内存详解 JavaScript 是一门动态、解释型语言,定义了多种不同类型的值,比如数字、字符串、布尔值、对象等。在 JavaScript 中,变量用于算术计算、字符串拼接、逻辑表达式等各种的场景,变量是引用值和原始值的存储体。 变量 变量的定义与命名规则 在 JavaScript 中,变量的定义使用关键字 var 或 let,如果不带任何…

    JavaScript 2023年6月10日
    00
  • js无痛刷新Token的实现

    当我们使用前后端分离的架构时,前端需要向后端服务器发送API请求获取数据,而前端需要在每次请求时,将后端返回的Token设置在请求的Header中。Token是用来验证用户身份的,它的有效期是有限的,过期后需要重新向服务器获取。在这种情况下,我们需要处理Token过期的问题。下面,我将提供一个JS无痛刷新Token的实现的完整攻略: Step1:在前端存储T…

    JavaScript 2023年5月19日
    00
  • 详解JavaScript如何优雅地实现创建多维数组

    JavaScript如何优雅地实现创建多维数组 在JavaScript中,创建多维数组可以使用嵌套的数组方式实现,但这种方式不够优雅,可以使用ES6的Array.from()方法和reduce()方法来实现创建多维数组。 使用Array.from()方法创建多维数组 Array.from()方法可以将一个类似数组或可迭代对象转化为一个真正的数组。这个方法接受…

    JavaScript 2023年5月27日
    00
  • JS实现json数组排序操作实例分析

    下面是JS实现json数组排序操作的完整攻略: 什么是JSON数组排序? JSON数组排序是指对一个JSON数组中的元素按照指定的规则进行排序的过程。 如何实现JSON数组排序? 下面是一些实现JSON数组排序的常用方法: 使用Array.sort()方法排序 首先,我们通过Array.sort()方法实现数组排序。Array.sort()方法可以接收一个可…

    JavaScript 2023年5月27日
    00
  • Vue设置keepAlive不生效问题及解决

    一起来详细讲解“Vue设置keepAlive不生效问题及解决”的完整攻略。 问题描述 在Vue开发中,我们通过设置keep-alive组件来缓存页面状态,避免重复渲染页面的性能瓶颈。但是,有时候我们可能会遇到这样的问题:设置了keep-alive却不生效,每次页面跳转都会重新渲染页面,这是为什么呢?如何解决这个问题呢? 原因分析 keep-alive组件默认…

    JavaScript 2023年6月11日
    00
  • 通过实例了解JS执行上下文运行原理

    JS执行上下文(execution context)是JS解释器在处理JS代码时,创建的一个对象,用来管理和维护当前代码的执行环境,包括当前作用域内的变量、函数声明、this指向和外部环境等相关信息。本文将通过两条实例,来深入了解JS执行上下文的运行原理。 执行上下文的创建过程 在JS解释器执行JS代码之前,首先会创建一个全局上下文(Global Execu…

    JavaScript 2023年6月10日
    00
  • vue如何根据权限生成动态路由、导航栏

    生成动态路由,实现权限控制是一个较为常见的需求,以下是可以参考的攻略: 1.准备工作 1)安装依赖 需要安装vue-router和vue-cli-plugin-auto-routing模块 npm install vue-router vue-cli-plugin-auto-routing –save 2)配置自动路由生成插件 首先需要在vue.confi…

    JavaScript 2023年6月11日
    00
  • js运动事件函数详解

    JS运动事件函数详解 在JS中,事件函数是编写交互逻辑的重要部分。其中,运动事件函数可以实现对象的平移、缩放、旋转等效果。本文将详细讲解JS中的运动事件函数,包括常见的函数、使用注意事项和两个示例说明。 常见的运动事件函数 以下是JS常用的运动事件函数: setInterval():重复调用一个函数或执行一段代码,间隔一定的时间(以毫秒为单位)。 setTi…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部