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

解析Javascript事件冒泡机制

事件          在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作。          浏览器的事件表示的是某些事情发生的信号。...一般地,事件在传递过程中会有一些信息,这些是事件的组成部分:事件发生的时间+事件发生的地点+ 事件的类型+事件的当前处理者+其他信息, ? 完整的html代码如下: <!...原因就在于事件的冒泡,点击span的时候,span 会把产生的事件往上冒泡,作为父节点的div2 和 祖父节点的div1也会收到此事件,于是会做出事件响应,执行响应函数。...方法二:事件包含最初触发事件的节点引用 和 当前处理事件节点的引用,那如果节点只处理自己触发的事件即可,不是自己产生的事件不处理。...我们再来分析一下方法二:方法二的原理是 元素收到事件后,判断事件是否符合要求,然后做相应的处理,然后事件继续冒泡往上传递;         既然事件是冒泡传递的,那可不可以让某个父节点统一处理事件,通过判断事件的发生地

70240

View的事件源码解析

上次刚刚分析了view的事件拦截机制,那么这次我们通过源码来分析一波view的事件,如果对view的事件不了解的,可以先看View的事件拦截浅析 解析View的源码 既然是分析源码,那么我们就要找准入手点...既然是事件的分析,我们就应该知道从哪入手。就是touchevent了。 首先,我们先了解下下面几个属性,这肯定是和事件有关的。...7.setOnLongClickListener:长按事件 8.setClickListener:点击事件 上次我们讲过view的事件是从dispatchtouchevent–>onTouchEvent...总结 我们可以把View的事件分析总结成如下几句话: 1.view的事件可以理解成一个责任链模式,其实我当时就是因为了解了责任链模式,才会快速的理解view的事件传递的。...那他将不执行任何事件,包括ontouch。 4.如果view的ontouch消耗了事件,他不再执行任何点击事件

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

    JavaScript事件循环机制解析

    事件循环 JavaScript是单线程,非阻塞的 浏览器的事件循环 执行栈和事件队列 宏任务和微任务 node环境下的事件循环 和浏览器环境有何不同 事件循环模型 宏任务和微任务 经典题目分析 1....浏览器的事件循环 执行栈和事件队列 执行栈: 同步代码的执行,按照顺序添加到执行栈中 事件队列: 异步代码的执行,遇到异步事件不会等待它返回结果,而是将这个事件挂起,继续执行执行栈中的其他任务。...当异步事件返回结果,将它放到事件队列中,被放入事件队列不会立刻执行起回调,而是等待当前执行栈中所有任务都执行完毕,主线程空闲状态,主线程会去查找事件队列中是否有任务,如果有,则取出排在第一位的事件,并把这个事件对应的回调放到执行栈中...页面渲染事件,各种IO的完成事件等随时被添加到任务队列中,一直会保持先进先出的原则执行,我们不能准确地控制这些事件被添加到任务队列中的位置。...如果不存在,那么再去宏任务队列中取出一个事件并把对应的回到加入当前执行栈; 当前执行栈执行完毕后时会立刻处理所有微任务队列中的事件,然后再去宏任务队列中取出一个事件

    66130

    事件总线怎么解析事件总线的优势是什么?

    当组件之间需要进行通信的时候有很多解决方案,我们常见的有父子关系组件和兄弟关系组件之间的通信,但是如果两个组件之间没有这种关系,一般会使用事件总线来进行通信。...事件总线应用的范围已经非常广,为我们提供了方便快捷的通信机制。那么事件总线怎么解析呢?请继续阅读下文内容。 事件总线怎么解析? 首先我们是需要构造函数出来,调用某种方法来获取到实例。...一般订阅方法有事件类型、线程模式以及优先级等等信息。在缓存中一般可以找到,找到之后立即操作返回。如果查找到所有的订阅方法,就可以对找到的所有订阅方法进行注册操作。...后面就可以操作发送事件,最后对订阅者进行取消注册。到这一步事件总线的解析算是完成了。 事件总线的优势是什么? 事件总线的优势还是比较明显的,首先它的代码实现起来比较容易,另外能够操作解藕。...此外它的效率非常高,无需反射处理解析,让服务器可以正常稳定运行,将视图与业务相分离。 事件总线怎么解析?以上就是我们为各位整理的内容。事件总线的操作并不复杂,这也是它能够广受欢迎的原因。

    48920

    View事件分发机制源码解析

    注:本文解析的源码基于 API 25,部分内容来自于《Android开发艺术探索》。...之前重新梳理了一下 View 事件的分发,所以为了有所记录,下定决心要写一篇关于 View 事件分发的博客。...虽然很早之前也写了一篇关于事件分发的博客《Android onTouch事件传递机制解析》,但是在这篇中分析不够全面,Activity 和 ViewGroup 没有涉及到。那么就来“再续前缘”吧。...因为最后的 View 部分在之前已经分析过了(也就是《Android onTouch事件传递机制解析》),所以今天的内容里关于 View 部分的就不再讲了,大家可以自己去这篇博客中接着看下去。...View View 部分的事件分发就参考一下《Android onTouch事件传递机制解析》,这里面讲的还是挺清楚的,很早以前写的,不多讲了。

    36340

    深度解析Spring事件监听机制

    前言 好久没有更新Spring了,今天来分享一下Spring的事件监听机制,之前分享过一篇Spring监听机制的使用,今天从原理上进行解析,Spring的监听机制基于观察者模式,就是就是我们所说的发布订阅模式...定义事件 如下定义了一个事件AppEvent,它继承了ApplicationEvent类,如果我们要使用Spring的事件监听机制,那么我们定义的事件必须继承ApplicationEvent ,否则就无法使用...有了事件监听器,就需要发布事件,所以就需要一个事件发布器,事件发布器使用的是ApplicationEventPublisher,使用它的publishEvent方法进行事件发布。...,里面是一些发布事件的逻辑,但是由于我们还没有正式发布事件,所以这里并不会发布事件,当我们使用applicationEventPublisher的publishEvent方法发布事件时,才会真正的发布事件...总结 上面对Spring事件监听机制的使用和原理进行了详细的介绍,并对其中涉及的组件进行解析,Spring事件监听机制是一个很不错的功能,我们在进行业务开发的时候可以引入,在相关的开源框架中也是用它的身影

    78250

    react源码解析18事件系统

    react源码解析18事件系统 视频课程(高效学习):进入课程 课程目录: 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api 6.legacy...10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件系统...代码也很简单,模拟一个modal框,点击显示出现,点击其他地方,相当于点击了mask,modal消失,因为react事件都是委托到上层,所以需要在handleClick阻止冒泡,这样点击显示的时候不会触发...document上的事件回调,导致modal无法显示。...事件系统架构图 我们以SimpleEvent为例看事件注册、绑定和触发的过程,看视频的调试过程 事件注册 DOMPluginEventSystem.js会调用SimpleEventPlugin插件的

    48120

    react源码解析18事件系统

    react源码解析18事件系统 视频讲解(高效学习):进入学习 往期文章: 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api 6.legacy...10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件系统...代码也很简单,模拟一个modal框,点击显示出现,点击其他地方,相当于点击了mask,modal消失,因为react事件都是委托到上层,所以需要在handleClick阻止冒泡,这样点击显示的时候不会触发...document上的事件回调,导致modal无法显示。...事件系统架构图 我们以SimpleEvent为例看事件注册、绑定和触发的过程,看视频的调试过程 事件注册 DOMPluginEventSystem.js会调用SimpleEventPlugin插件的

    41410

    Spring - 事件监听机制 源码解析

    注册事件监听器 事件的发布和消费 根据事件获取事件监听器 唤醒监听器处理事件 ---- Pre Spring Boot - 扩展接口一览 众所周知,Spring Framework在 BeanFactory...今天我们就来看看 扩展的 事件监听接口 ---- 概述 我们都知道 实现事件监听机制至少四个组成部分: 事件 事件生产者 事件消费者 控制器 (管理生产者、消费者和事件之间的注册监听关系) 在Spring...中,事件监听机制主要实现是通过事件事件监听器、事件发布者和事件广播器来实现。...spring中的事件核心控制器叫做事件广播器,两个作用 将事件监听器注册到广播器中 这样广播器就知道了每个事件监听器分别监听什么事件,且知道了每个事件对应哪些事件监听器在监听。...将事件广播给事件监听器 当有事件发生时,需要通过广播器来广播给所有的事件监听器,因为生产者只需要关心事件的生产,而不需要关心该事件都被哪些监听器消费。

    34331

    Laravel源码解析事件系统

    Laravel 的事件提供了一个简单的观察者实现,能够订阅和监听应用中发生的各种事件事件机制是一种很好的应用解耦方式,因为一个事件可以拥有多个互不依赖的监听器。...laravel 中事件系统由两部分构成,一个是事件的名称,事件的名称可以是个字符串,例如 event.email,也可以是一个事件类,例如 App\Events\OrderShipped;另一个是事件的...数组包含所有的事件(键)以及事件对应的监听器(值)来注册所有的事件监听器,可以灵活地根据需求来添加事件。...触发事件 可以用事件名或者事件类的对象来触发事件,触发事件时用的是 Event::fire(newOrdershipmentNotification), 同样它也来自 events服务 public function...listeners中找到事件名称对应的所有 listener闭包,然后调用这些闭包来执行监听器中的任务,需要注意的是: 如果事件名参数事件对象,那么会用事件对象的类名作为事件名,其本身会作为时间参数传递给

    1.1K40

    解析Android点击事件分发机制

    搭建最简单的结构 新建Activity,重写dispatchTouchEvent和onTouchEvent,前面的方法负责点击事件的分发,后面的方法负责点击事件的消耗,然后打印三种触摸事件的触发 private...这套动作的后续事件交给上个事件的最后消耗者,不经过其他控件的分发 三个函数的其他返回值 dispatchTouchEvent和onTouchEvent都有三种返回情况 – true – false...可点击View的事件分发流程 ?...结语 事件的分发流程到此就结束了,目的已经达到了,找到了我们想要点击的那个按钮或者其他控件,总结下来就是从Activity经过ViewGroup然后到View依次分发,然后又从底向上确认自己是否消耗该事件...,如果某个对象消耗了,动作的后续事件都由他来处理。

    1.1K10

    mysql binlog日志事件解析

    11:39 mysql-bin.000005 -rw-r----- 1 mysql mysql 132 Jun 9 11:39 mysql-bin.index 如下我们用mysqlbinlog来解析二进制...----------+------------------+-------------------------------------------+ 1 row in set (0.00 sec) 解析...,单位字节 #21060911:36:17 该事件的写入时间 server id 2223306 产生该时间的mysql的server id end_log_pos 124 表示该事件结束的偏移量124...(start表示该事件的类型为Format_description_event为第一个事件,该事件的创建时间和二进制日志文件创建时间一致) 二进制日志的第一个事件是Format_description_event...*/; Xid:表示次事件类型为Xid_event 表示事务提交 Xid =21:该事务的xid为21,在mysql异常恢复阶段,mysql会解析redo日志中处于prepare状态的事务,得到xid,

    2.2K11

    react源码解析18事件系统

    react源码解析18事件系统 视频讲解(高效学习):进入学习 往期文章: 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api 6.legacy...10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件系统...代码也很简单,模拟一个modal框,点击显示出现,点击其他地方,相当于点击了mask,modal消失,因为react事件都是委托到上层,所以需要在handleClick阻止冒泡,这样点击显示的时候不会触发...document上的事件回调,导致modal无法显示。...事件系统架构图 我们以SimpleEvent为例看事件注册、绑定和触发的过程,看视频的调试过程 事件注册 DOMPluginEventSystem.js会调用SimpleEventPlugin插件的registerEvents

    46830

    5-VI--ListView事件解析

    零、前言 [0.]本案例使用这篇的项目(你也可以用其他的):4-VI--☆ListView的封装支持多种条目 [1].条目点击事件 [2].条目长按事件 [3].滑动事件 [4].条目抢占交点问题...一、条目点击事件:setOnItemClickListener 几个参数----根据图片参照对应: parent:背景变成淡绿色 view:背景变成随机颜色 position:弹出来 下面未点击的变色了...ToastUtil.showAtOnce(ChatActivity.this, "当前位置:" + position); } }); ---- 一、条目长按事件...:setOnItemLongClickListener 几个参数和点击一样 值得注意的一点是返回值: true: 手指抬起时不触发条目的点击事件 false: 手指抬起时触发条目的点击事件...ToastUtil.showAtOnce(ChatActivity.this, "长按--当前位置:" + position); return true; } }); 三、滑动事件

    79120
    领券