事件触发机制

首先我们先弄明白浏览器事件触发机制,分为三个阶段:

  1. 事件捕获阶段:window 往事件触发处传播,遇到注册的捕获事件会触发 (addEventListener 的 true)

  2. 事件目标处理函数:传播到事件触发处时触发注册的事件 (博主没搞懂这个阶段)

  3. 事件冒泡阶段:从事件触发处往 window 传播,遇到注册的冒泡事件会触发(addEventListener 的 false 和 onclick、onmouseover...)

addEventListener

dom.addEventListener(‘click‘, function(ev) {
    // do something
}, false)

dom.addEventListener(‘click‘, function(ev) {
    // do something
}, {
    useCapture: false, // 是否在捕获阶段触发
    once: false, // 是否只触发一次,如果 true ,则触发后马上销毁
    passive: false, // 如果是true,则调用 ev.preventDefault 会被忽略
})

事件触发顺序:

如果触发的 ev.target 直接是 dom 本身,那么执行顺序不按 useCapture 来,因为这些事件会同时触发,这个时候触发顺序是按注册顺序来。

如果触发的 ev.target 是 dom 的某个子节点,那么执行顺序按 useCaputrue 来,先 addEventlistener true,然后 onClick 和 addEventListener false 按注册顺序执行。

ev.stopPropagation 和 ev.stopImmediatePropagation

都是阻止捕获和冒泡阶段中当前事件的进一步传播。

唯一区别是 stopImmediatePropagation 阻止剩下的等效阶段的事件,而 stopPropagation 只会阻止往后阶段的时间传播

例如: 

let div = document.querySelector(‘#logo‘)

div.addEventListener(
  ‘click‘,
  ev => {
    console.log(‘div a‘)
  },
  false
)

div.onclick = function(ev) {
    console.log(‘div click‘)
}
div.addEventListener(
  ‘click‘,
  ev => {
    console.log(‘div b‘)
    // ev.stopPropagation()
    // ev.stopImmediatePropagation()
  },
  true
)
div.addEventListener(
  ‘click‘,
  ev => {
    console.log(‘div b2‘)
  },
  true
)

点击div的一个子元素:

1. 依次打印 div b、div b2、div  a、div click

2. 取消注释 ev.stopPropagation(),依次打印 div b、div b2

2. 取消注释 ev.stopImmediatePropagation(),打印 div b

preventDefault

preventDefault()方法,告诉浏览器,它默认的动作也不要做了。此事件还是继续传播(捕获、冒泡不会停)

原文地址:https://www.cnblogs.com/amiezhang/p/11407112.html

时间: 2024-10-04 21:58:40

事件触发机制的相关文章

C#事件触发机制

C#的事件触发机制,类似于c++的回调函数机制 我先简单说一下,委托和事件的实质,后期再重开一篇博文来详细说 委托:指向方法的指针,类似于C的函数指针 事件:是一个可以存放0个或多个方法指针的数据结构  .......... 在一次编译后会为其生成一个类等等的就以后另开博文说了 看看触发机制 方便理解,来个通俗一点的图 事件触发源类 class cclass { private char i; public delegate void ichanged(cclass s); public eve

EventEmitter:nodeJs事件触发机制

Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列 Node.js 里面的许多对象都会分发事件:一个 net.Server 对象会在每次有新连接时触发一个事件, 一个 fs.readStream 对象会在文件被打开的时候触发一个事件. 所有这些产生事件的对象都是 events.EventEmitter 的实例 NodeJs事件监听触发机制依赖 events 核心模块, events 模块只提供了一个对象: events.EventEmitter.EventEmitter

[转载] 理解 epoll 的事件触发机制

原文: http://weibo.com/p/1001603862394207076573?sudaref=weibo.com epoll的I/O事件触发方式有两种模式:ET(Edge Triggered)和LT(Level Triggered). 这个触发模式其实是events(事件)的属性,该属性是和POLLIN.POLLOUT等属性并列且混杂使用的,而events有时依附在fd(文件描述符)上的,所以可以说:这个触发模式是events所依附的fd的属性.区分events和fd的原因是ker

python 模拟事件触发机制

EventManager.py 1 # -*- encoding: UTF-8 -*- 2 3 # 系统模块 4 from queue import Queue, Empty 5 from threading import * 6 7 8 class EventManager: 9 def __init__(self): 10 """初始化事件管理器""" 11 # 事件对象列表 12 self.__eventQueue = Queue() 13

cocos2d-x 事件分发机制 ——触摸事件监听

cocos2d-x 3.0 出来已经好久了,也已经用3.0写了几个小游戏,感觉3.0的事件触发机制太赞了,随这里总结一下,也算是对知识的一种回忆和加深理解. 3.0的事件分发机制中,需要也仅仅需要通过创建一个事件监听器来实现各种触发后的逻辑,然后添加到事件分发器_eventDispatcher,所有的事件监听器由这个分发器统一管理,即可完成事件响应. 事件监听器有以下几种: 1.EventListenerTouch(触摸事件) 2.EventListenerKeyboard(键盘响应事件) 3.

Android Activity 和 ViewGroup中事件触发和传递机制

1.在只有Activity的情况: 1)Touch事件触发流程: 首先触发dispatchTouchEvent 然后触发onUserInteraction 再次onTouchEvent 如果是点击的话,紧跟着下列事件(点击分俩步,ACTION_DOWN,ACTION_up) 触发dispatchTouchEvent 再次onTouchEvent 当ACTION_up事件时不会触发onUserInteraction(可查看源代码) 2)键盘事件触发流程 首先触发dispatchKeyEvent 然

Android触摸屏事件派发机制详解与源码分析二(ViewGroup篇)

1 背景 还记得前一篇<Android触摸屏事件派发机制详解与源码分析一(View篇)>中关于透过源码继续进阶实例验证模块中存在的点击Button却触发了LinearLayout的事件疑惑吗?当时说了,在那一篇咱们只讨论View的触摸事件派发机制,这个疑惑留在了这一篇解释,也就是ViewGroup的事件派发机制. PS:阅读本篇前建议先查看前一篇<Android触摸屏事件派发机制详解与源码分析一(View篇)>,这一篇承接上一篇. 关于View与ViewGroup的区别在前一篇的A

javascript事件委托机制详解

以个人前端工作面试经历来看,javascript事件委托是问的最多的一类题目之一,熟悉事件委托能够了解你对于javascript的掌握程度. 面试官可能问一下问题,现在有5个li待办事件,需要实现当点击一个li时实现弹出该li的信息 <ul class="top"> <li>橘子</li> <li>香蕉</li> <li>苹果</li> <li>梨子</li> <li>

Android事件分发机制详解:史上最全面、最易懂

前言 Android事件分发机制是每个Android开发者必须了解的基础知识 网上有大量关于Android事件分发机制的文章,但存在一些问题:内容不全.思路不清晰.无源码分析.简单问题复杂化等等 今天,我将全面总结Android的事件分发机制,我能保证这是市面上的最全面.最清晰.最易懂的 本文秉着"结论先行.详细分析在后"的原则,即先让大家感性认识,再通过理性分析从而理解问题: 所以,请各位读者先记住结论,再往下继续看分析: 文章较长,阅读需要较长时间,建议收藏等充足时间再进行阅读 目