资讯专栏INFORMATION COLUMN

js手札--关于事件冒泡与事件捕获

lentoo / 3432人阅读

摘要:一冒泡和捕获事件执行子元素在执行某个事件的前后,会引起上层元素触发相同事件。三补充关于和这两个其实和捕获与冒泡一点关系都没有,是用来阻止事件的默认行为的。

一、冒泡和捕获

事件执行子元素在执行某个事件的前后,会引起上层元素触发相同事件。例:我点击了div,那么不光div会执行click事件,上层的body和html等等也会执行click。

冒泡与捕获解决了:事件执行顺序由谁开始,由谁结束

事件冒泡:click执行顺序(div -> body -> html -> document

事件捕获:click执行顺序(document -> html -> body -> div

冒泡与捕获方法

IE < 9只冒泡

    target.attachEvent(eventName, callback)  //只能冒泡
    target.detachEvent(eventName, callback)

IE9+ | chrome | firefox | safari冒泡+捕获

    target.addEventListener(eventName, callback) // 冒泡方式
    target.removeEventListener(eventName, callback)
    
    target.addEventListener(eventName, callback, true)  // 捕获方式
    target.removeEventListener(eventName, callback, true)

(一) 事件冒泡

啥也不说,看例子,点击t2区域:

很明显的,由内而外,没啥可说的。我这边没装IE,所以所以测试都是在(chrome,firfox,safari中测试的)。

(二)事件捕获

同样点击t2区域,可以见到变成由外而内:

(三)先捕获后冒泡

这次点击t1区域,先捕获后冒泡

二、阻止冒泡和捕获

IE和Netscape的阻止方式

IEevent.stopPropagation()

Netscapee.cancelBubble = true;

(一)阻止冒泡

同样点击t2区域,可以见到t3的click事件就不会被触发了。

(二)阻止捕获

同样点击t2区域,可以见到t2的click事件没有被触发。因为我们在触发t3的时候,让捕获停止了,那样t2也就接受不到要触发click的消息了,也就over了。

三、补充

关于Netscape: preventDefault()IE: event.returnValue

这两个其实和捕获与冒泡一点关系都没有,是用来阻止事件的默认行为的。如:我点击标签,正常说会执行跳转相应网页。但加入preventDefault()后就不会跳转了。

看例子:
照理说我点击了t1, 那应该会正常跳转才对

但加了下面的代码之后,就跳不动了。

总算结束了,每次去查捕获和冒泡的资料都发现会附带着preventDefault,也是懵了。一开始我以为preventEvent是阻止捕获的,stopPropagation是阻止冒泡的,后来发现其实压根就不是这样,也是我看的不仔细啊。唉,路还长着,继续,前行。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79746.html

相关文章

  • JS 中的事件冒泡捕获

    摘要:在之前是只支持事件冒泡,包括之后和目前主流的浏览器都同时支持两种事件。中可以用来取消事件冒泡。 刚接触 JS 的那个时候,啥也不懂,只想着如何利用 Google、百度到的函数来解决实际的问题,不会想到去一探究竟。 渐渐的,对 JS 的语言的不断深入,有机会去了解一些原理性东西。最近在看 JQuery 源码,感触很多,总想着用原生的 JS 去实现自己的一个 JQuery 库。说实在的,J...

    Rindia 评论0 收藏0
  • 原生js之DOM事件相关

    摘要:而由于级标准中并没有定义事件相关的内容,所以事件级别只包括级,级和级三种。此属性返回当前事件所绑定的对象。自定义事件可以绑定到任意元素上,此处选择只是为了演示方便。 前端学习的东西有很多,现代前端开发,前端工程化的东西要懂,基础的原生js也要懂,毕竟,框架都是有生命周期的,更替非常快,然而却有这么一个框架,它是最轻量的前端框架,每个浏览器都内置,它叫vanilla.js。好吧,其实va...

    learning 评论0 收藏0
  • JS复习-JS事件捕获冒泡

    摘要:也就是说事件流一定是按上面的顺序经过这三个阶段。关于事件捕获,事件冒泡的引用场景,有事件委托等。下面引用两篇文章。 什么是捕获?什么是冒泡? 给元素绑定事件会经历三个阶段:一:捕获阶段(capture phase)--先从根元素流向目标元素;二:目标阶段(target phase)--在目标元素上的事件被触发;三:冒泡阶段(bubbling phase)--目标元素流向根元素 就像你中...

    BakerJ 评论0 收藏0
  • JS复习-JS事件捕获冒泡

    摘要:也就是说事件流一定是按上面的顺序经过这三个阶段。关于事件捕获,事件冒泡的引用场景,有事件委托等。下面引用两篇文章。 什么是捕获?什么是冒泡? 给元素绑定事件会经历三个阶段:一:捕获阶段(capture phase)--先从根元素流向目标元素;二:目标阶段(target phase)--在目标元素上的事件被触发;三:冒泡阶段(bubbling phase)--目标元素流向根元素 就像你中...

    haoguo 评论0 收藏0
  • JS复习-JS事件捕获冒泡

    摘要:也就是说事件流一定是按上面的顺序经过这三个阶段。关于事件捕获,事件冒泡的引用场景,有事件委托等。下面引用两篇文章。 什么是捕获?什么是冒泡? 给元素绑定事件会经历三个阶段:一:捕获阶段(capture phase)--先从根元素流向目标元素;二:目标阶段(target phase)--在目标元素上的事件被触发;三:冒泡阶段(bubbling phase)--目标元素流向根元素 就像你中...

    dcr309duan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<