专栏首页Jerry的SAP技术分享JS Event handler example - event capture and bubble

JS Event handler example - event capture and bubble

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://jerry.blog.csdn.net/article/details/100824067

Created by Jerry Wang, last modified on Jun 06, 2015

source link: http://www.ido321.com/1570.html

这个example 有一个陷阱,如果测试用的script不写在window.ready事件里,将得不到效果。

事件捕获和事件冒泡是事件流中的两个阶段,任何事件产生时,如点击一个按钮,将从最顶端的容器开始(一般是html的根节点)。浏览器会向下遍历DOM树直到找到触发事件的元素

点击button 1:

target: button

至此target node处理完了,继续处理hierarchy树的下一个节点:body. 此时event.target 还是button:

然后继续处理body下面的div 节点:

找到目的节点了:

一旦浏览器找到该元素,事件流就进入事件目标阶段,该阶段完成后,浏览器会沿DOM树向上冒泡直到最顶层容器,看看是否有其它元素需要使用同一个事件。

大多数现代库使用冒泡监听,而在捕获阶段处理。浏览器包含一个方法来管理事件冒泡。事件处理程序可以调用stopPropagation告诉DOM事件停止冒泡

第二个方式是调用stopImmediatePropagation,它不仅停止冒泡,也会阻止这个元素上其它监听当前事件的处理程序触发。然而,停止传播事件时要小心,因为你不知道是否有其它上层的DOM元素可能需要知道当前事件。

This example also shows how to raise and catch custom event via jQuery:

<img src=“https://cloud.githubusercontent.com/assets/5669954/26556349/4ca0cb16-449a-11e7-8d2e-fb47d690b0f2.png)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • NVIDIA Deepstream 4.0笔记(五):仓储物流场景应用

    本次笔记整理自NVIDIA 8月20日在线研讨会,原讲座标题:DEEPSTREAM SDK – ACCELERATING REAL-TIME AI BASED ...

    GPUS Lady
  • Kubernetes应用健康检查

    在实际生产环境中,想要使得开发的应用程序完全没有bug,在任何时候都运行正常,几乎 是不可能的任务。因此,我们需要一套管理系统,来对用户的应用程序执行周期性的健...

    kubernetes中文社区
  • NVIDIA Deepstream 4.0笔记(完结篇):如何开始使用Deepstream​以及容器

    本次笔记整理自NVIDIA 8月20日在线研讨会,原讲座标题:DEEPSTREAM SDK – ACCELERATING REAL-TIME AI BASED ...

    GPUS Lady
  • Docker(二)-在Docker中部署Nginx实现负载均衡【完整教程】

    在前面的文章中我们已经介绍了如何在Centos7系统中安装Docker以及利用Docker进行Asp.Net Core应用的部署。在本文中,我们将继续介绍利用D...

    .Net框架学苑
  • 基于Docker搭建Redis Cluster ,三主三从的配置

    docker network create --subnet=192.168.200.0/24 redisclusternet

    yingzi_code
  • SSM基础环境搭建流程

    在 pom.xml 文件中添加如下依赖,基本的 jar 包都存在了,如果需要引入别的 jar 包,可以自行添加。

    万能青年
  • RabbitMQ笔记(七)-SimpleMessageListenerContainer和DirectMessageListenerContainer

    在版本2.0之前的版本中,只有一种MessageListenerContainer—SimpleMessageListenerContainer;

    yingzi_code
  • 软件架构万字漫谈:业务架构、应用架构与云基础架构

    软件开发就是把一个复杂的问题分解为一系列简单的问题,再把一系列简单的解决方案组合成一个复杂的解决方案。而软件开发中最大的挑战,就是即能够快速高效地针对需求、环境...

    王下邀月熊
  • vue 实现一个简单的栅格组件

    参考iview, ant-design 的栅格组件,发现两者的基础思路是一致的。 这里通过实现一个简化版的栅格组件做总结.

    copy_left
  • JUC 多线程高并发不安全集合类

    由于 ArrayList 的 add() 方法没有加锁,多个线程同时添加数据会出现 java.util.ConcurrentModificationExcept...

    万能青年

扫码关注云+社区

领取腾讯云代金券