首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

js 停止事件冒泡 阻止浏览器的默认行为

在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。...浏览器默认行为: 在form中按回车键就会提交表单;单击鼠标右键就会弹出context menu. a标签 1..停止事件冒泡 JavaScript代码 1 //如果提供了事件对象,则这是一个非IE浏览器...return false; } 但是在使用return false时必须注意: 1、jQuery有自己的事件处理层,也对处理程序做了封装,如果事件处理程序返回false,事件冒泡和浏览器默认事件都会被阻止...2、使用原生javaScript,在事件处理程序中返回false只会阻止浏览器默认行为,而事件冒泡依然存在。 3、浏览器默认行为和事件冒泡是相互独立的。阻止事件冒泡不会影响默认行为,反之亦然。...注意: 有一些浏览器行为是在事件处理程序执行前发生的,也就是说这些默认行为是无法取消的,如:在大部分浏览器上鼠标移到一个超链接上超链接的样式会发生改变,这个动作是发生在focus事件之前的,是focus

5.2K120

Android | Jetpack 处理回退事件的新姿势 —— OnBackPressedDispatcher

前言 从 androidx.activity 1.0.0 开始,Google 引入 OnBackPressedDispatcher API 来处理回退事件,旨在优化回退事件处理:你可以在任何位置定义回退逻辑...当用户触发返回键时,将按顺序遍历责任链,如果回调对象是启用状态(Enabled),则会消费该回退事件,并且停止遍历。...OnBackPressedDispatcher 与其他方案对比: 在 OnBackPressedDispatcher 之前,我们只能通过 “取巧” 的方法处理回退事件: 1、在 Fragment 中定义回调方法...OnBackPressedCallback onBackPressedCallback) 3、判断是否有启用的回调 public boolean hasEnabledCallbacks() 4、回退事件分发入口...当用户触发返回键时,将按顺序遍历责任链,如果回调对象是启用状态(Enabled),则会消费该回退事件,并且停止遍历。

1.3K20

浏览器事件

浏览器事件 常用浏览器事件与DOM事件,包括鼠标事件、键盘事件、框架/对象事件、表单事件、剪贴板事件、打印事件、拖动事件、多媒体事件、动画事件、过渡事件。...ononline: 该事件浏览器开始在线工作时触发。 onoffline: 该事件浏览器开始离线工作时触发。 onshow: 该事件当元素在上下文菜单显示时触发。...onloadstart: 事件浏览器开始寻找指定视频/音频触发。 onpause: 事件在视频/音频暂停时触发。 onplay: 事件在视频/音频开始播放时触发。...onplaying: 事件在视频/音频暂停或者在缓冲后准备重新开始播放时触发。 onprogress: 事件浏览器下载指定的视频/音频时触发。...onseeking: 事件在用户开始重新定位视频/音频时触发。 onstalled: 事件浏览器获取媒体数据,但媒体数据不可用时触发。 onsuspend: 事件浏览器读取媒体数据中止时触发。

2.3K20

Js 事件委托(事件代理)

一、概述 事件委托,又叫事件代理。事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。 例子:有三个同事预计会在周一收到快递。...二、为什么是使用事件委托 一般来说,dom需要有事件处理程序,我们都会直接给它设事件处理程序就好了,那如果是很多的dom需要添加事件处理呢?...在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间...,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能; 每个函数都是一个对象...三、事件委托原理 事件委托利用的是事件冒泡原理,将事件绑定到父级元素上,当点击子元素时,通过事件冒泡将事件传递到父级元素。  四、总结: 那什么样的事件可以用事件委托,什么样的事件不可以用呢?

11.4K30

JavaScript 事件循环:从起源到浏览器再到 Node.js

本文从三个角度来研究 JavaScript 的事件循环: 为什么是事件循环 事件循环是什么 浏览器与 Node.js事件循环差异 为什么是事件循环 JavaScript 是网景 (Netscape)...所以本质的执行顺序还是: 一次外部事件 所有内部事件 HTML 渲染 回到到 1 浏览器与 Node.js事件循环差异 根据本文开头我们讨论的事件循环起源,很容易理解为什么浏览器与 Node.js...至于内在的差异,有一个很重要的地方是 Node.js (libuv)在最初设计的时候是允许执行多次外部的事件再切换到内部队列的,而浏览器端一次事件循环只允许执行一次外部事件。...关于浏览器与 Node.js事件循环,如果你要问我那边更加简单,那么我肯定会说是 Node.js事件循环更加简单,因为它的多个外部队列是可枚举的并且优先级是固定的。...造成浏览器端与 Node.js事件循环的差异的一个很大的原因在于 。

1.1K30

一篇文章搞懂浏览器Js事件循环机制

浏览器事件循环机制 前言 在初次入门学习和使用 JavaScript 的过程中,相信遇到过许多程序执行顺序及结果与预期不一致的问题,在查阅资料的过程中了解到原来是程序的执行有同步与异步之分;与此同时也会看到许多有关概念...但是 JS 是一门单线程语言,同一时间内做一件事。...最初作为服务于浏览器的脚本语言,很多时候都是在与用户交互,这个过程涉及了许多 DOM 的操作,倘若使用多线程,那么就容易出现几个线程同时操作一个 DOM 的问题,那么浏览器此时要以哪一个线程为主呢?...这样一来无疑增加了复杂性,所以 JS 成为了单线程。虽然说多线程处理起来也很高效,但对于当时直接服务于浏览器用户的 JS 来说,尽可能避免过度复杂,能更简单的处理相对好点吧。...I/O 常见微任务 Promise.then catch finally MutationObserver (仅浏览器提供) process.nextTick (仅 node 提供) 三、事件循环机制

84030

浏览器事件循环

渲染主线程是浏览器中最繁忙的线程,需要它处理的任务包括但不限于: 解析 HTML 解析 CSS 计算样式 布局 处理图层 每秒把页面画 60 次 执行全局 JS 代码 执行事件处理函数 执行计时器的回调函数...比如: 我正在执行一个 JS 函数,执行到一半的时候用户点击了按钮,我该立即去执行点击事件的处理函数吗? 我正在执行一个 JS 函数,执行到一半的时候某个计时器到达了时间,我该立即去执行它的回调吗?...参考答案: JS是一门单线程的语言,这是因为它运行在浏览器的渲染主线程中,而渲染主线程只有一个。 而渲染主线程承担着诸多的工作,渲染页面、执行 JS 都在其中运行。...在一次事件循环中,浏览器可以根据实际情况从不同的队列中取出任务执行。...,由于和我们开发关系不大,不作考虑 面试题:阐述一下 JS事件循环 参考答案: 事件循环又叫做消息循环,是浏览器渲染主线程的工作方式。

15920

浏览器事件循环

浏览器为什么需要事件循环 Node.js 中的事件循环 回答关键点 任务队列 异步 非阻塞 浏览器需要事件循环来协调事件、用户操作、脚本执行、渲染、网络请求等。...什么是浏览器事件循环 在计算机中,Event Loop 是一个程序结构,用于等待和发送消息和事件。...浏览器事件循环是以浏览器为宿主环境实现的事件调度,操作顺序如下: 执行同步代码。 执行一个宏任务(执行栈中没有就从任务队列中获取)。 执行过程中如果遇到微任务,就将它添加到微任务的任务队列中。...而事件循环为浏览器引入了任务队列(task queue),使得异步任务可以非阻塞地进行。 浏览器事件循环在处理异步任务时不会一直等待其返回结果,而是将这个事件挂起,继续执行栈中的其他任务。...Node.js 中的事件循环 在 Node.js 中,事件循环表现出的状态与浏览器中大致相同。不同的是 Node.js 中有一套自己的模型。

80700

js事件大全

一般事件 事件 浏览器支持 描述 onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件 onMouseDown...onMove IE|N4|O 浏览器的窗口被移动时触发的事件 onResize IE4|N4|O 当浏览器的窗口大小被改变时触发的事件 onScroll IE4|N|O 浏览器的滚动条位置发生变化时触发的事件...onStop IE5|N|O 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断 onUnload IE3|N2|O3 当前页面将被改变时触发的事件 表单相关事件 事件 浏览器支持 描述...滚动字幕事件 事件 浏览器支持 描述 onBounce IE4|N|O 在Marquee内的内容移动至Marquee显示范围之外时触发的事件 onFinish IE4|N|O 当Marquee...onRowsDelete IE5|N|O 当前数据记录将被删除时触发的事件 onRowsInserted IE5|N|O 当前数据源将要插入新数据记录时触发的事件 数据绑定 事件 浏览器支持 描述

3.8K10

js --- 事件

1.事件流   事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流。...2.两种事件流模型   1.冒泡型事件流:事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根   2.捕获型事件流:事件的传播是从最不特定的事件目标到最特定的事件目标。...即从DOM树的根到叶子 3.绑定事件的方法   1.普通浏览器 绑定事件:addEventListener(type,name,bool);     删除事件:removeEventListener...()   2.ie 低版本 绑定事件:attachEvent()     删除事件:detachEvent() 4.参数说明 type 事件类型 例如:click load   name...事件执行函数   bool true 为事件捕获 && false 为事件冒泡 5.阻止事件冒泡和 事件捕获 1.阻止事件冒泡 不 阻止默认行为     event.stopPropagation

7.5K30

JS 事件循环

浏览器执行线程 在解释事件循环之前首先先解释一下浏览器的执行线程: 浏览器是多进程的,浏览器每一个 tab 标签都代表一个独立的进程,其中浏览器渲染进程(浏览器内核)属于浏览器多进程中的一种,主要负责页面渲染...,脚本执行,事件处理等 其包含的线程有:GUI 渲染线程(负责渲染页面,解析 HTML,CSS 构成 DOM 树)、JS 引擎线程、事件触发线程、定时器触发线程、http 请求线程等主要线程 关于执行中的线程...: 主线程:也就是 js 引擎执行的线程,这个线程只有一个,页面渲染、函数处理都在这个主线程上执行。...工作线程:也称幕后线程,这个线程可能存在于浏览器js引擎内,与主线程是分开的,处理文件读取、网络请求等异步事件。...宏任务主要包含:script( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境) 微任务主要包含:Promise、MutaionObserver

15.4K10
领券