js事件冒泡、事件捕获和阻止默认事件详解

JS事件冒泡、事件捕获和阻止默认事件

事件冒泡

事件冒泡是指当一个元素触发了某个事件时,该事件会从子元素一直冒泡到祖先元素。例如,当一个按钮被点击时,点击事件会首先被触发,然后该事件会向外冒泡,一直到文档根节点才停止。

事件捕获

事件捕获是指当一个元素触发了某个事件时,该事件会从祖先元素一直捕获到子元素。例如,当一个按钮被点击时,点击事件会从文档根节点开始捕获,直到被点击的按钮才停止。

阻止默认事件

有些元素会有默认的事件行为,例如a标签的点击会跳转页面,表单的提交会刷新页面等。为了防止这些默认行为发生,我们可以使用preventDefault()方法来中止默认事件的执行。例如,当点击一个a标签时,可以使用以下代码防止跳转:

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
});

事件流模型

事件流模型分为两种:捕获型事件流和冒泡型事件流。在捕获型事件流中,事件首先从最外层的祖先元素被捕获,接着沿着树形结构依次触发,最后到达目标元素;在冒泡型事件流中,事件首先从目标元素开始,沿着树形结构依次向上冒泡,最终到达祖先元素。默认情况下,所有的事件都是冒泡型事件流。

示例一:事件冒泡

<body>
  <div id="grandparent">
    <div id="parent">
      <div id="child"></div>
    </div>
  </div>
</body>
document.querySelector('#grandparent').addEventListener('click', function(){
  console.log('Grandparent clicked');
});

document.querySelector('#parent').addEventListener('click', function(){
  console.log('Parent clicked');
});

document.querySelector('#child').addEventListener('click', function(){
  console.log('Child clicked');
});

当点击child元素时,依次输出“Child clicked”,“Parent clicked”和“Grandparent clicked”。

示例二:阻止默认事件

<body>
  <a href="http://www.baidu.com">点击跳转</a>
</body>
document.querySelector('a').addEventListener('click', function(event){
  event.preventDefault();
  console.log('Link clicked, but default behavior prevented');
});

当点击a标签时,阻止了跳转并输出“Link clicked, but default behavior prevented”。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js事件冒泡、事件捕获和阻止默认事件详解 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • JS中filter( )数组过滤器的使用

    下面是关于”JS中filter()数组过滤器的使用”的详细讲解。 简介 filter()是JavaScript数组对象的函数,它可以基于某一条件对数组进行过滤,在返回的新数组中只保留符合条件的值。使用数组过滤器可以只保留想要的值,同时节省代码。filter()方法不会修改原始数组,它会返回一个新数组,所以在使用时需要记住将它赋值给一个变量来保存新数组。 使用…

    JavaScript 2023年5月27日
    00
  • JS返回iframe中frameBorder属性值的方法

    JS返回iframe中frameBorder属性值的方法可以使用以下步骤: 步骤1:获取iframe元素 使用document.getElementById()方法获取指定id的iframe元素。 例如,假设您的iframe元素的id为myFrame,代码如下: var iframe = document.getElementById(‘myFrame’);…

    JavaScript 2023年6月11日
    00
  • JavaScript数组的定义及数字操作技巧

    关于JavaScript数组的定义及数字操作技巧,以下是一份完整攻略: 定义JavaScript数组 1. 直接定义 使用[]定义一个空数组,或者使用[element1, element2, …]定义一个带有初始元素的数组。 示例:定义一个空数组和一个包含元素的数组 let arr1 = []; let arr2 = [‘apple’, ‘banana’…

    JavaScript 2023年5月19日
    00
  • js注册时输入合法性验证方法

    下面是详细的”js注册时输入合法性验证方法”攻略: 步骤一:获取注册表单中需要验证的DOM元素 在注册表单中,可能需要验证用户的姓名、邮箱、密码、确认密码等信息,我们需要获取这些DOM元素,方便后面使用。 <body> <form id="registerForm"> <div> <label f…

    JavaScript 2023年6月10日
    00
  • 关于base64编码和解码的js工具函数

    下面我将为您详细讲解“关于base64编码和解码的js工具函数”的完整攻略。 什么是Base64编码? Base64是一种用于将二进制数据转换成可打印ASCII字符的编码方式。Base64编码使用64种ASCII字符来表示二进制数据,每三个字节为一组,每组由四个字符表示。 为什么需要Base64编码? 由于许多应用程序只能处理ASCII字符,而不能处理二进制…

    JavaScript 2023年5月19日
    00
  • JavaScript中的ArrayBuffer详细介绍

    JavaScript中的ArrayBuffer是一种用于存储二进制数据的内存缓冲区。它提供了许多高效地操作二进制数据的方法,包括创建、读写、复制、转换等。 创建ArrayBuffer 在JavaScript中,我们可以通过以下方式来创建一个ArrayBuffer: let buffer = new ArrayBuffer(length); 其中length表…

    JavaScript 2023年5月27日
    00
  • javascript设计模式之Adapter模式【适配器模式】实现方法示例

    下面我会详细讲解“Javascript设计模式之Adapter模式【适配器模式】实现方法示例”的完整攻略,包括如何使用适配器模式以及示例的具体实现。 什么是适配器模式? 适配器模式是一种行为型设计模式,用于将一个类的接口转换成另一个客户端所期望的接口。通俗来讲,就是使得一个类能够应对多种不同的接口。 适配器模式的应用场景 在实际的编程中,适配器模式的应用场景…

    JavaScript 2023年6月10日
    00
  • VueCli3中兼容IE11配置的艰苦历程

    下面是详细的“VueCli3中兼容IE11配置的艰苦历程”的完整攻略: 第一步:安装依赖和设置babel 在项目根目录下,通过以下命令安装两个依赖: npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack –save-dev 这里我们使用了babel-loade…

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