JS事件冒泡和时间捕获

最近一直在找工作,相信事件冒泡、事件捕获对于web前端来说,是个很重要的点,现在在学习过程中做个总结。

什么是js事件冒泡?

官方:事件开始时由具体的元素接收,然后逐级向上传播到较为不具体的节点。(IE5.5及更早版本会跳过<html>,从body直接跳到document),IE9、firefox、chrome等事件会一直冒泡到window对象

自己的理解:当设定了多个div的嵌套时,即建立了父子关系,当父div与子div共同加入了onclick事件时,当触发子div的onclick事件后,子div进行相应的JS操作,但是父div的onclick事件同样会被触发,这就造成了事件的并发,导致页面混乱。

怎样阻止事件冒泡:在w3c标准里调用event.stopPropagation()

                                    在IE下通过设置window.event.cancelBubble=true来实现。

什么是事件捕获?

官方:(事件捕获的思想)不太具体的节点应该更早接收到事件,而更具体的节点应该最后接收到事件。

注意:IE的内核是没有捕获事件的过程。

举例说明:

<!DOCTYPE html>

<html>

<head>

<title>event bubble</title>

</head>

<body>

<div id='div'>click me</div>

</body>

</html>

事件冒泡:div->body->html->document

事件捕捉:document->html->body->div

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 背景知识 什么是事件?直观的说就是网页上发生的事情,大部分是指用户的鼠标动作和键盘动作,如点击、移动鼠标、按下某个...
    吧啦啦小汤圆阅读 1,965评论 2 15
  • 我们首先要明白,我们给页面添加效果用到的js到底是什么?js其实包含三部分:dom 文档对象模型 bom 浏览...
    一直以来都很好阅读 860评论 0 0
  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 1,317评论 3 11
  • 一、问答 1. dom对象的innerText和innerHTML有什么区别? innerHTML: 也就是从对象...
    饥人谷_罗伟恩阅读 692评论 0 2
  • 《 系统备份部分 》 # 打开终端,切换到root状态 sudo su # 进入系统"/"目录 cd / # 执行...
    ZOKE阅读 5,607评论 0 4

友情链接更多精彩内容