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

事件流、事件捕获和事件冒泡的介绍

事件流、事件捕获和事件冒泡的介绍 最近有用到对应的场景,下班了特地来整理下响应的概念,巩固下知识。 我们在点击页面时,事件发生时会在各元素节点按照一定的顺序进行传播,这种传播过程就称作事件流。...事件流分为三个阶段: 1、事件捕获阶段 事件从window发出,不断向子元素寻找对应的目标节点 2、事件目标阶段 事件找到了对应的目标节点,即此时再往下已经没有对应的节点 3、事件冒泡阶段 事件从节点位置网上回溯到文档的根节点...我们在使用给dom添加事件时一般使用addEventListener方法,该方法传入三个参数 1、对应的事件名称如:click 2、函数:触发对应的交互响应后执行的函数 3、userCapture:指定事件是在捕获还是冒泡阶段执行..."); }, true); // 对应的打印结果 body 事件捕获 test.html:37 container 事件捕获 test.html...有个例子就讲的挺有形象,就好比一个塑料扔到水里,先往下沉(捕获阶段),沉到最底部(目标阶段)再慢慢浮起来(冒泡阶段)。

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

    息息相关的 JS 同步,异步和事件轮询

    每个函数都有自己的执行上下文。 调用栈 调用堆栈顾名思义是一个具有LIFO(后进先出)结构的堆栈,用于存储在代码执行期间创建的所有执行上下文。 JS 只有一个调用栈,因为它是一种单线程编程语言。...请记住setTimeout不是JS引擎的一部分,它是Web Api的一部分。 为了理解这段代码是如何执行的,咱们必须理解更多的概念,比如事件轮询和回调队列(或消息队列)。 ?...事件轮询、web api和消息队列不是JavaScript引擎的一部分,而是浏览器的JavaScript运行时环境或Nodejs JavaScript运行时环境的一部分(对于Nodejs)。...消息队列还包含来自DOM事件(如单击事件和键盘事件)的回调。...小结 因此,咱们了解了异步 JS 是如何工作的,以及调用堆栈、事件循环、消息队列和任务队列等概念,这些概念共同构成了 JS 运行时环境。

    9.8K31

    liteavsdk的推流事件和播放事件的事件码

    推流和播放的事件码我们通常通过这个来判断当前的流的状态 推流事件列表 code TXLiveSDKEventDef常量 含义说明 1001 PUSH_EVT_CONNECT_SUCC 已经连接推流服务器...-1306 PUSH_ERR_UNSUPPORTED_SAMPLERATE 不支持的音频采样率 -1307 PUSH_ERR_NET_DISCONNECT 网络断连,且经多次重连抢救无效,可以放弃治疗...服务器连接失败 3003 PUSH_WARNING_SHAKE_FAIL RTMP服务器握手失败 3004 PUSH_WARNING_SERVER_DISCONNECT RTMP服务器主动断开,请检查推流地址的合法性或防盗链有效期...100001 INNER_EVT_SET_BITRATE_4_SCREEN_CAPTURE 动态设置录屏编码码率 100002 INNER_EVT_BGM_PLAY_FINISH BGM播放完毕 播放事件列表...PLAY_EVT_GET_PLAYINFO_SUCC 获取点播文件信息成功 2011 PLAY_EVT_CHANGE_ROTATION MP4视频旋转角度 2012 PLAY_EVT_GET_MESSAGE 消息事件

    2.4K40

    SelectedIndexChanged事件, SelectedValueChanged事件和SelectionChangeCommitted事件的区别及应用

    SelectedIndexChanged事件, SelectedValueChanged事件和SelectionChangeCommitted事件的区别及应用 l SelectionChangeCommitted...事件 在设定datasource和displaymember和valuemember时,以及手动改变combobox索引和值时都不触发该事件, 只是在界面选择combobox不同值时触发 2...SelectedIndexChanged事件 索引改变时触发 3 SelectedValueChanged事件 值改变时触发 设置DataSource, DisplayMember..., ValueMember不同顺序触发SelectedIndexChanged事件和SelectedValueChanged事件的次数 顺序一: this.comboBox1.DisplayMember...= "userName";(都触发) SelectedValueChanged触发四次(总是先触发)SelectedIndexChanged,触发三次 (设置DisplayMember属性时不触发两种事件

    1.1K51

    input元素的oninput事件和onchange事件

    input元素的oninput事件和onchange事件 框架用多了,感觉原生的有点弱化了,不说了,是时候巩固一波了 ^ _ ^ 1、input元素上绑定事件的三种方式: 第一种:直接在元素标签上添加oninput...) { // 处理事件代码 } 第二种:获取input元素,然后在元素对象上添加oninput属性,属性值为函数,函数内部为处理事件函数的调用 的oninput事件和onchange事件的区别 oninput事件是在输入框中输入时就会触发 onchange事件是在输入框输入完内容后,输入框失焦后触发 onchange事件兼容性好...,主流浏览器都支持 oninput事件IE9以下不支持,其余主流浏览器都支持,针对IE9以下的可以使用onpropertychange事件来替代 参考文献: [1] oninput 事件 [2] input...输入框的input事件和change事件 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/135594.html原文链接:https://javaforall.cn

    3.5K10

    前端学习(51)~事件的传播和事件冒泡

    DOM事件流 事件传播的三个阶段是:事件捕获、事件冒泡和目标。 事件捕获阶段:事件从祖先元素往子元素查找(DOM树结构),直到捕获到事件目标 target。...在这个过程中,默认情况下,事件相应的监听函数是不会被触发的。 事件目标:当到达目标元素之后,执行目标元素该事件相应的处理函数。如果没有绑定监听函数,那就不执行。...事件冒泡 事件冒泡: 当一个元素上的事件被触发的时候(比如说鼠标点击了一个按钮),同样的事件将会在那个元素的所有祖先元素中被触发。...这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。 通俗来讲,冒泡指的是:子元素的事件被触发时,父元素的同样的事件也会被触发。取消冒泡就是取消这种机制。...pagey + 'px'; }; // 【重要注释】 // 当 document.onmousemove 和

    98720

    前端学习(50)~事件的绑定和事件对象

    绑定事件的两种方式/DOM事件的级别 我们在之前的一篇文章《04-JavaScript/22-DOM简介和DOM操作》中已经讲过事件的概念。...("事件2"); } 点击按钮后,上方代码的打印结果: 事件2 我们可以看到,DOM对象.事件 = 函数的这种绑定事件的方式:一个元素的一个事件只能绑定一个响应函数...原事件被执行的时候,后面绑定的事件照样被执行 // 这种写法不存在响应函数被覆盖的情况。...浏览器每次都会将这个事件event作为实参传进之前的响应函数。 这个对象中包含了与当前事件相关的一切信息。比如鼠标的坐标、键盘的哪个按键被按下、鼠标滚轮滚动的方向等。...console.log(event.clientY); } event 属性 event 有很多属性,比如: 由于pageX 和

    94720

    javascript对点击事件和拖动事件的区分

    1.项目中,为了更好的服务用户,经常会设计一个便捷的通道,这个通道一般都是“悬浮”的。...最重要的就是要区分点击事件和拖动事件。 我们都知道,点击事件是被点击的对象可看做是静止不动的,而拖动事件的对象很明显是移动的。...那么思路就应该是先判断事件对象是否有移动的现象, 但是由于不管是在点击事件和拖动事件,其都有一个鼠标按下的一个过程和一个松开的过程,只不过拖动事件多了一个拖动动作。...那么完整的思路应是这样的: 第一:先写出鼠标按下的函数; 第二:编写对象是否被拖动的函数; 第三:判断对象是否相对原先位置产生了位移; 第四:编写鼠标松开之后的代码; 完整代码如下: var timmerHandle...自己整理了一份2018最全面前端学习资料,从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理,送给每一位前端小伙伴,这里是小白聚集地,欢迎初学和进阶中的小伙伴!

    5.2K30

    深入理解JavaScript中的事件传播机制:事件冒泡和事件捕获

    前言在JavaScript中,事件冒泡和事件捕获是两种不同的事件传播方式。当一个事件被触发时,它会从最内层的元素开始,然后逐级向外传播,直到最外层的元素。...在这个过程中,事件会经过每一个元素,直到它到达最内层的元素。在本文中,我们将详细了解事件冒泡和事件捕获,并探讨它们在JavaScript中的实现以及如何使用它们。...这是因为事件从按钮开始向外传播,然后经过内部div和外部div,直到它到达文档的最外层。事件捕获事件捕获是指当一个事件被触发时,它会从最外层的元素开始,然后逐级向内传播,直到最内层的元素。...这是因为事件从文档的最外层开始向内传播,然后经过外部div、内部div和按钮,直到它到达按钮。事件冒泡和事件捕获的区别事件冒泡和事件捕获的主要区别在于它们的传播方向。...这是因为事件从文档的最外层开始向内传播,然后经过外部div、内部div和按钮,直到它到达按钮。结论在JavaScript中,事件冒泡和事件捕获是两种不同的事件传播方式。

    2.1K21

    【Java AWT 图形界面编程】事件处理机制 ③ ( AWT 中常见的事件和事件监听器 | 低级事件 | 组件事件 | 窗口事件 | 鼠标事件 | 高级事件 | 动作事件 | 事件监听器 )

    文章目录 一、AWT 中常见的事件 1、低级事件 2、高级事件 二、AWT 中常见的事件监听器 一、AWT 中常见的事件 ---- AWT 中事件分为两大类 , 低级事件 和 高级事件 ; 低级事件...: 基于某个特定基本动作的事件 , 如 点击 , 拖动 , 获取焦点 , 失去焦点 等固定的简单操作 ; 高级事件 : 不基于某个特定事件 , 而是 根据 功能的具体含义 定义的事件 ; 1、低级事件..., 组件获取焦点 , 失去焦点 触发的事件 ; 鼠标事件 : MouseEvent , 鼠标 按下 , 移动 , 抬起 , 点击 触发的事件 ; 键盘事件 : KeyEvent , 键盘 按下 , 松开..., 点击 时触发的事件 ; 绘制事件 : PaintEvent , 组件绘制时触发的事件 , 当调用 update paint 函数时 , 触发该事件 ; 2、高级事件 高级事件 : 组件的 某项功能...; 二、AWT 中常见的事件监听器 ---- 事件监听器 与 事件是一一对应的 , 只需要将事件的 Event 改成 Listener 即可 ; AWT 中常见的事件监听器 : 组件事件监听器 : ComponentListener

    1.9K20

    事件监听函数,以及事件的捕获和冒泡机制

    事件一般是用于浏览器和用户操作之间的交互,当用户执行某些特殊的操作时,浏览器给予反应,触发绑定的事件,事件流,事件发生时会在元素节点和根节点之间按照约定的顺序传播,事件经过的所有节点都会受到事件的影响,...这个传播过程被称为DOM事件流 函数事件 事件一般是用于浏览器和用户操作之间的交互,当用户执行某些特殊的操作时,浏览器给予反应,触发绑定的事件 事件流,事件发生时会在元素节点和根节点之间按照约定的顺序传播...,第二个表示触发的事件 正常情况下,第二个参数直接写函数名并且不加参数(),如果加了参数()则表示立即执行,不需要触发第一个参数要求的条件 2.在这里绑定事件的时候,事件名不能和定义的变量名一样,否则无效...3.利用事件的捕获和冒泡做点事情 addEventListener()和removeEventListener()其实拥有三个参数,刚才说过了,第一个表示触发条件,第二个表示触发事件,第三个参数正常情况下可以省略...2.缺点:一个元素只能绑定一个事件处理函数,只会在事件冒泡中运行 DOM2级事件处理程序 该级别的事件处理程序,运用的就是事件捕获和冒泡机制 测试

    1.3K10

    Python-EEG处理和事件相关电位(ERP)

    # 只筛选 EEG 和 EOG数据 raw.pick_types(meg=False, eeg=True, eog=True) # 查看 raw 信息, 可以发现有59个EEG通道和1个EOG通道 print...自定义参考:使用通道EEG 001和EEG 002的平均值作为参考 raw_custom, _ = mne.set_eeg_reference(raw, ['EEG 001', 'EEG 002'])...接下来,我们创建左刺激和右刺激试验的平均值。 我们可以使用基本的操作,例如,构建和绘制不同的ERP。...这是权重相等的差异。 如果试验编号不平衡,则也可以考虑使每个条件的事件数相等(使用epochs.equalize_event_counts)。 例如,首先,我们为每种情况创建单独的ERP。...all_evokeds = [epochs[cond].average() for cond in sorted(event_id.keys())] print(all_evokeds) # 然后,我们也以这种方式构造和绘制左右试验的未加权平均值

    87330

    selecpoll中的读写事件和epoll中的读写事件

    在Linux网络编程中,常常使用select和poll来做事件触发,监听socket的读写状态,然后进行读写操作。...现在新的linux内核中,增加了epoll事件触发机制,具有更高的性能和更好的设计理念,可以用它来完全代替select和poll。...(引自《使用EPOLL进行网络编程》,这篇文章主要是进行一个读写事件的总结,不会过多地讨论epoll,而且本人也是初学) 一、select/poll中的读写事件 1.下列四个条件中的任何一个满足时,...) 写事件的发生 1、连接建立成功后可写(accept获取的套接字或者客户端建立连接的套接字) 2、缓冲区可写 通过上面的分别阐述,epoll的读写事件区分要比select/poll清晰一些,epoll...还有很多优点和细节,在以后的文章中再介绍

    3.2K40

    Python-脑电图处理和事件相关电位(ERP)

    Rose小哥今天主要介绍一下MNE-Python中进行脑电图处理和事件相关电位(ERP)。 有后台留言问,代码是在哪里运行的。...# 只筛选 EEG 和 EOG数据 raw.pick_types(meg=False, eeg=True, eog=True) # 查看 raw 信息, 可以发现有59个EEG通道和1个EOG通道 print...自定义参考:使用通道EEG 001和EEG 002的平均值作为参考 raw_custom, _ = mne.set_eeg_reference(raw, ['EEG 001', 'EEG 002'])...接下来,我们创建左刺激和右刺激试验的平均值。 我们可以使用基本的操作,例如,构建和绘制不同的ERP。...这是权重相等的差异。 如果试验编号不平衡,则也可以考虑使每个条件的事件数相等(使用epochs.equalize_event_counts)。 例如,首先,我们为每种情况创建单独的ERP。

    1.3K21

    事件相关电位ERP的皮层溯源分析

    在这里,我们描述了重建记录在头皮上的脑电图信号的皮层发生器的必要步骤。我们提供了一个事件相关电位(ERPs)源重建的例子,在一个6个月大的婴儿执行的面部处理任务。...此外,EEG的高时间分辨率可以捕获毫秒量级的事件,而不受fMRI所依赖的较慢的血流动力学响应(~秒)的限制。通过应用源分析计算来识别记录在头皮上的活动的神经发生器,可以克服EEG的空间分辨率差的特点。...因此,根据脑电图信号提供的功能活动(如振幅和潜伏期的变化)、fMRI获得的结构解剖以及先进的数据处理和分析方法可以确定研究大脑发育的源分析方法。源定位分析可以可以分为偶极子方法或分布式源方法。...脑电的功能连接通常是在头皮-电极水平上完成的,并通过相位耦合显示不同电极之间观察到的相关性。与脑电的功能连接可以在源级完成。这揭示了皮层源而不是头皮位置之间的连接。...这方面的黄金标准是使用来自个体参与者的结构核磁共振成像来构建源分析的基本属性。

    73940

    分享 10 道 Nodejs EventLoop 和事件相关面试题

    —— 斯大林 通过对以下 10 个面试题的分享,助您更好的理解 Node.js 的事件和 EventLoop 相关知识 作者简介:五月君,Nodejs Developer,慕课网认证作者,热爱技术、喜欢分享的...当收到一个请求时,它将使用一个 JavaScript 闭包排队进入 EventLoop,该闭包包括这个事件(request 和 response)和相应的回调。...一旦这个工作完成,将会触发相应的回调将响应结果返回给主线程 Event Loop 将响应返回给客户端 下图展示了 Node.js EventLoop 的体系结构 ?...阶段三:idle, prepare 该阶段仅系统内部(libuv)调用 阶段四:poll 检索新的 I/O 事件;执行与 I/O 相关的回调(几乎所有情况下,除了关闭的回调函数,setImmediate...它提供了 on 和 emit 等属性,on 用于绑定函数,emit 用于触发事件。

    1.4K50
    领券