首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js事件流机制

什么是事件流 在JavaScript中事件流是指一个事件沿特定数据结构传播的一个过程。整个事件流总共包含三个阶段(从dome2来说):1.事件捕获阶段、2.处于事件目标阶段、3.事件冒泡阶段。...从这个图里面我们可以清晰的看到整个事件流的执行过程,首先是从window开始,一步步的从上向下执行,此过程就是事件捕获阶段,当到达了事件的位置以后则处于事件目标阶段,之后会在向上冒泡,进入事件的冒泡阶段...触碰完成以后再把手拿出来,正好是一个相反的过程,这就与我们的事件流机制是一个道理。 事件绑定 下面来看一下下面这个示例代码: 事件时,第三个参数为true则代表接受捕获事件。)...2 currentTarget 返回其事件监听器触发该事件的元素。 2 eventPhase 返回事件传播的当前阶段。

1.5K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JS:事件循环机制(Event Loops)

    ** 事件循环,即 Event Loops。用于协调事件、用户交互、JavaScript 脚本、DOM 渲染、网络请求等等的执行顺序问题。...一个遵循 ECMAScript 标准的代理(浏览器或 JS 引擎)也必须遵循事件循环机制。 事件循环是由一个或以上的 **任务队列** 组成的。 3. **什么是任务队列?...由于 JavaScript 是 **单线程** 语言,所以在 JS 中所有的任务都需要排队执行,这些任务共同组成了 **任务队列** ,依次排队执行的过程,形成一个 **执行栈(Execution Context...to=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FAPI%2FWindow%2FsetImmediate)(Node.js 环境...测试题 看到这里,JavaScript 的事件循环机制差不多就解释完了,涉及到了同步任务、异步任务、宏任务和微任务以及它们之间的关系。

    1.9K10

    js事件循环机制和优先级

    浏览器的渲染进程是多线程,包括 GUI渲染线程 js引擎线程 事件触发线程 定时器触发线程 异步http请求线程 主执行栈和任务队列 所有的任务可以分为同步任务和异步任务,同步任务,顾名思义,就是立即执行的任务...,同步任务一般会直接进入到主线程中执行;而异步任务,就是异步执行的任务,比如ajax网络请求,setTimeout 定时函数等都属于异步任务,异步任务会通过任务队列( Event Queue )的机制来进行协调...宏任务 (macro)task(又称之为宏任务),可以理解是每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行)。...microtask主要包含:Promise.then、MutaionObserver、process.nextTick(Node.js 环境) 它们的执行顺序如下: 在事件循环中,每进行一次循环操作称为...,立即执行当前微任务队列中的所有微任务(依次执行) 当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染 渲染完毕后,JS线程继续接管,开始下一个宏任务(从事件队列中获取) 宏任务与微任务的优先级(

    1.5K20

    深入理解 Node.js 事件循环机制

    Node.js 的事件循环是其核心机制,负责处理异步事件和回调函数。本文将带您深入理解 Node.js 事件循环的内部工作原理。事件循环的基本概念事件循环是 Node.js 实现异步非阻塞操作的关键。...事件循环的存在,使得 Node.js 能够在处理高并发和网络 I/O 密集型任务时,不会因为某个操作而阻塞整个程序的执行。...这种机制让 Node.js 成为了构建高性能网络应用程序的理想选择,尤其是在需要处理大量并发连接的场景,如 Web 服务器、实时通信系统等。...事件循环是怎么用作的Node.js 事件循环的工作流程可以分为以下几个阶段:Timers 阶段:处理 setTimeout 和 setInterval 定时器的回调函数。...了解了nodejs的循环机制,在开发就需要根据这个机制进行合理高效开发,需要注意一下几个原则避免长时间运行的计算任务:长时间运行的计算任务会阻塞事件循环,导致其他任务无法及时执行。

    30430

    事件机制

    浏览器事件机制 DOM事件模型分为捕获和冒泡。一个事件发生后,会在子元素和父元素之间传播(propagation)。...是布尔值useCapture参数的情况下,默认值为false,表示注册事件是冒泡事件,为true时表示注册事件是捕获事件。...事件代理的处理方式有以下优点: 节省内存 不需要给子节点注销事件 React中的事件机制 React中的事件机制与原生的完全不同,时间没有绑定在原生DOM上,发出的事件也是对原生事件的包装。...React内部事件系统可以分为两个阶段:事件注册和事件触发。...React事件机制的优点: 减少内存消耗,提升性能,一种事件类型只在document上注册一次 统一规范,解决ie事件兼容问题,简化事件逻辑 对开发者友好

    80411

    Js 的事件循环(Event Loop)机制以及实例讲解

    前言 大家都知道js是单线程的脚本语言,在同一时间,只能做同一件事,为了协调事件、用户交互、脚本、UI渲染和网络处理等行为,防止主线程阻塞,Event Loop方案应运而生… 公众号里面的文章不能添加外部链接...个人博客了解一下:obkoro1.com ---- 为什么js是单线程? js作为主要运行在浏览器的脚本语言,js主要用途之一是操作DOM。...') } a(); b(); c(); // 当a、b、c函数都执行完成之后,三个setTimeout才会依次执行 ---- js 异步执行的运行机制。...忍者秘籍 ---- 结语 类似上文的面试题还有很多,实则都大同小异,只要掌握了事件循环的机制,这些问题都会变得很简单。 文章如有不正确的地方欢迎各位路过的大佬鞭策!...以上2018.6.16 参考资料: 详解JavaScript中的Event Loop(事件循环)机制 JavaScript中的事件循环 Event Loop JavaScript 运行机制详解:再谈Event

    1.7K10

    js事件

    中的值类型:String,Number,Boolean,Null,Object,Function 8.JS中的字符型转换成数值型:parseInt(),parseFloat() 9.JS中的数字转换成字符型...:(""+变量)10.JS中的取字符串长度是:(length) 11.JS中的字符与字符相连接使用+号. 12.JS中的比较操作符有:==等于,!...=不等于,>,>=,<.<= 13.JS中声明变量使用:var来进行声明 14.JS中的判断语句结构:if(condition){}else{} 15.JS中的循环结构:for([initial expression...HTML: 51.当超链和ONCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.例:<a href="a.html" onclick......的多重继续. 73.JS中的self指的是当前的窗口 74.JS中状态栏显示内容:window.status="内容" 75.JS中的top指的是框架集中最顶层的框架 76.JS中关闭当前的窗口:

    10.8K110

    jQuery事件机制

    jQuery事件机制 JavaScript中已经学习过了事件,但是jQuery对JavaScript事件进行了封装,增加并扩展了事件处理机制。...jQuery事件发展历程(了解) 简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐) 简单事件注册 click(handler) //单击事件...}); 缺点:只能注册委托事件,因此注册时间需要记得方法太多了 on注册事件 on注册事件(重点) jQuery1.7之后,jQuery用on统一了所有事件的处理方法。...(标准事件或者自定义事件) // 第二个参数:selector, 执行事件的后代元素(可选),如果没有后代元素,那么事件将有自己执行。...$(selector).trigger("click"); jQuery事件对象 jQuery事件对象其实就是js事件对象的一个封装,处理了兼容性。

    1.8K10

    JavaScript 事件机制

    通俗地来说, JavaScript 事件机制描述的是事件在 DOM 里面的传递顺序,以及我们可以对这些事件做出如何的响应。 假设我们具有一个 ul 元素,其包括很多 li 元素。...简单范例 在接下来的博文中,我们通过以下范例对事件机制进行介绍。 事件 通常我们使用 addEventListener 注册事件,该函数有一个 useCapture 参数,该参数接收一个布尔值,默认值为 false ,代表注册事件为冒泡事件。...target 是触发事件的某个具体的对象,只会出现在事件机制的目标阶段,即“谁触发了事件,谁就是 target ”。 currentTarget 是绑定事件的对象。...但通过事件传播机制,我们可以在 ul 注册 eventListener 。 这样的好处有亮点: 节省内存 不需要给子节点注销事件 参考资料 DOM 的事件傳遞機制:捕獲與冒泡

    86030

    事件分发机制

    Motion Events  传感器事件:重力、加速度。     3.  Remote Control Events  远程遥控事件。...以前比较流行的中间凸起的标签栏,你有具体考虑过中间那个按钮的点击事件吗?超出标签栏那部分的点击事件你要不做处理,它能执行的到吗?    ...,UIApplication 单例就从事件队列中取出最新的事件,依靠 hit-Testing 找出并且返回你点击的View,让View执行事件。...上面就是hitTest的一些概念和简单的使用,其实它能做的事还是挺多的,我把自己学习的笔记链接全都整理出来给; iOS事件分发机制(一) hit-Testing 技术哥 iOS事件分发机制(二)The...Responder Chain 技术哥 iOS触摸事件处理 史上最详细的iOS之事件的传递和响应机制 Motion Events  和  Remote Control Events:     Motion

    1.1K80

    事件监听机制

    相信大家都学过Java中的GUI,不知道你们对GUI中的事件机制有没有产生过好奇心,当我们点击按钮时,就可以触发对应的点击事件,这一过程究竟是如何实现的呢?...本篇文章我们就来聊一聊Java中的事件监听机制。 在了解事件监听机制之前,我们先来学习一个设计模式——观察者模式,事件监听机制的原理就是它。...事件监听机制 了解观察者模式之后,我们进入本篇文章的重心,事件监听机制。...在该模型中,有三个非常重要的概念: 事件 事件源 事件监听器 其具体流程是:用户操作(比如点击)导致事件触发,前提是事件监听器已经被注册好了,事件触发后会生成事件对象,此时事件对象会作为参数传递给事件监听器...(this); } 事件回调方法就输出了当前对象,以上就是整个事件监听机制的流程。

    8.3K10

    nodejs的事件处理机制以及事件环机制

    nodejs的事件处理机制以及事件环机制 ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS...1.EventEmitter类 在Node.js中用于事件处理的event模块中,定义了一个EventEmitter类.所有可能触发的事件都是EventEmitter类子类的实例对象,EventEmitter...事件环机制 事件循环定义:当线程中的I/O任务完成之后就会执行指定的回调函数,并且将这个完成的事件放在事件队列的尾部,等待事件循环,当主线程再次循环到这个事件的时候,就会直接处理并且返回给上层调用,这个过程就是事件循环...LIBUV层:是跨平台的底层封装,实现了 事件循环、文件操作等,是 Node.js 实现异步的核心。...在Node.js的内部是通过线程池来完成I/O操作的,但是LIBUV层会针对不同的操作系统平台的差异性实现了统一调用,Node.js的单线程指的是JavaScript运行在单线程中,并不是说Node.js

    99810

    js动画事件_JavaScript事件

    js之动画事件 首先,动画事件主要包括以下三个animationstart,animationiteration和animationend事件,下面做简单分别介绍。...animationstart 该事件在css动画开始播放时触发 animationiteration 该事件在css动画重新播放时触发 animationend 该事件在css动画结束播放时触发 我们知道...animation:name duration timing-function delay iteration-count direction; 分别是:动画名称 动画持续事件 动画运行速度曲线 动画开始时的运行时间...this.innerHTML="动画正在运行"; x.style.background="pink"; } function myanimationiterration() //动画再次运行触发,同样也是通过事件监听...this.innerHTML="动画重新运行"; x.style.background="greenyellow"; } function myanimationend() //动画运行结束时触发,同样也是通过事件监听事件

    18.4K10

    Js 事件委托(事件代理)

    一、概述 事件委托,又叫事件代理。事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。 例子:有三个同事预计会在周一收到快递。...二、为什么是使用事件委托 一般来说,dom需要有事件处理程序,我们都会直接给它设事件处理程序就好了,那如果是很多的dom需要添加事件处理呢?...,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能; 每个函数都是一个对象...三、事件委托原理 事件委托利用的是事件冒泡原理,将事件绑定到父级元素上,当点击子元素时,通过事件冒泡将事件传递到父级元素。  四、总结: 那什么样的事件可以用事件委托,什么样的事件不可以用呢?...适合用事件委托的事件:click,mousedown,mouseup,keydown,keyup,keypress。

    11.4K30

    【Android 事件分发】事件分发源码分析 ( ViewGroup 事件传递机制 四 | View 事件传递机制 )

    】事件分发源码分析 ( ViewGroup 事件传递机制 一 ) 【Android 事件分发】事件分发源码分析 ( ViewGroup 事件传递机制 二 ) 【Android 事件分发】事件分发源码分析...( ViewGroup 事件传递机制 三 ) 【Android 事件分发】事件分发源码分析 ( ViewGroup 事件传递机制 四 | View 事件传递机制 ) ---- 文章目录 Android...事件分发 系列文章目录 前言 一、View 的事件传递机制 ( dispatchTouchEvent ) 二、触摸事件 与 点击事件 冲突处理 三、View 事件分发相关源码 前言 接上一篇博客 【Android...事件分发】事件分发源码分析 ( ViewGroup 事件传递机制 三 ) , 继续分析 ViewGroup 的事件分发机制后续代码 ; 一、View 的事件传递机制 ( dispatchTouchEvent...) ---- 在上一篇博客 【Android 事件分发】事件分发源码分析 ( ViewGroup 事件传递机制 三 ) 二、当前遍历的子组件的事件分发 章节 , 分析到 ViewGroup 的 dispatchTouchEvent

    2.1K10
    领券