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实现文字列表无缝滚动效果

    实现文字列表无缝滚动效果有多种方法,其中一种常用的实现方式是使用JavaScript和CSS结合的方法。 以下是实现文字列表无缝滚动效果的具体步骤: 1. 准备HTML结构 首先,需要在HTML文件中添加一个无序列表(ul),该列表包含所有需要滚动显示的文本元素(li),例如: <ul id="scroll-list"> &l…

    JavaScript 2023年6月11日
    00
  • bootstrap fileinput 上传插件的基础使用

    下面是针对Bootstrap FileInput上传插件的基础使用攻略。 介绍 Bootstrap FileInput是一款基于Bootstrap框架的文件上传插件,支持多文件上传、进度条展示、预览等功能,可以应用于各种网站和应用中。在本文中,我们将介绍Bootstrap FileInput的基础用法,包括引入和配置等方面。 引入文件 首先,在你的HTML文…

    JavaScript 2023年5月28日
    00
  • JS中捕获console.log()输出的方法

    JavaScript中,我们可以使用console.log()来输出日志信息,但是如果想要将console.log()输出的内容捕获到程序中进行处理,该怎么做呢? 以下是JS中捕获console.log()输出的方法的完整攻略: 一、使用console.log重定义 首先,我们可以通过重定义console.log()方法来将输出内容重定向到我们所定义的另一个…

    JavaScript 2023年5月28日
    00
  • javascript正则表达式使用replace()替换手机号的方法

    下面是详细讲解“javascript正则表达式使用replace()替换手机号的方法”的完整攻略。 一、概述 JavaScript中的正则表达式是匹配和操作字符串文本的强大工具,经常用来处理一些文本内容,如替换敏感信息等。replace() 是 JavaScript 字符串处理中的方法之一,可以使用正则表达式在字符串中查找与模式匹配的子字符串,并返回替换这些…

    JavaScript 2023年6月10日
    00
  • js实现删除json中指定的元素

    下面是如何实现删除JSON中指定元素的攻略: 1. 找到要删除的元素 在删除JSON中指定元素时,首先要找到要删除的元素。我们可以使用JavaScript的filter()或splice()方法来操作JSON对象。 利用filter()方法: let data = [ {id: 1, name: ‘Alice’}, {id: 2, name: ‘Bob’},…

    JavaScript 2023年5月27日
    00
  • js实现各种复制到剪贴板的方法(分享)

    下面是js实现各种复制到剪贴板的方法的攻略: 一、前置知识 为了实现复制到剪贴板的功能,必须要掌握以下前置知识: Clipboard API:一种新的Web API,提供了操作剪贴板的标准接口,并且被主流浏览器所支持。 execCommand()方法:一种旧的Web API,已经被废弃,但是在Clipboard API出现之前是实现复制到剪贴板的常用方法。 …

    JavaScript 2023年6月11日
    00
  • Vue-Router进阶之滚动行为详解

    Vue-Router进阶之滚动行为详解 什么是滚动行为?为什么需要滚动行为? 在Vue-Router中,我们可以使用路由跳转来实现前后端页面之间的跳转,但是当我们来回切换不同的路由时会发现一个问题:每次切换完页面,新页面都会从顶部开始显示,这给用户带来了不好的体验。 这个问题可以通过设置滚动行为来解决。滚动行为可以定义在路由配置中,配合自定义行为函数,实现路…

    JavaScript 2023年6月11日
    00
  • 盘点javascript 正则表达式中 中括号的【坑】

    盘点 JavaScript 正则表达式中中括号的【坑】 在使用 JavaScript 正则表达式时,中括号 […] 是非常常见也非常重要的语法,它可以用于匹配一组字符中的任意一个字符。但是,在使用中括号时,也需要注意一些坑点。 1. 中括号中的 – 的意义 在中括号中如果使用 – 连接两个字符,表示匹配范围,例如 [0-9] 表示匹配 0 到 9 之间的…

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