JS事件冒泡机制以及委托方法,以及vue中的stop

时间: 2019-09-07阅读: 62标签: 事件

要理解事件冒泡机制,就得先了解事件。浏览器是事件驱动型的,根据用户的行为触发不同的事件,根据事件执行相应的操作。我们较为熟悉的事件有三大类型:鼠标键盘事件、页面事件、表单相关事件。

鼠标键盘事件:onclick、ondbclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup;
页面事件:onload、onunload、onresize、onerror、onabort;
表单相关事件:onblur、onchange、onfocus、onreset、onsubmit。

需要注意的是事件处理程序中的变量event保留着事件对象的信息,包括比如click事件,事件属性里有点击位置相对于浏览器,以及页面的坐标信息,事件的类型(click),触发事件的DOM节点信息等。


什么是事件冒泡?

DOM中,树状结构决定了子元素肯定在父元素里,所以点击子元素,就同时点击了子元素和父元素,以及父元素的父元素,以此类推,当然最终的根节点都是文档,以及window。

试想,当一个子元素被点击的时候,不仅仅这个元素本身被点击了,因为这个元素也在其上一级父元素中(属于父级元素的地盘),所以相当于其父元素也被点击了,以此类推,一层一层往外推,最终整个文档也是被点击了,如果每个层级的节点元素都绑定了click事件,那么每个节点的click事件函数都会被执行。举个形象的例子,一个村里的人被打了(click),首先就要按照村里的规矩处理,同时这个村属于某个乡镇,当然也是相当于这个乡镇的人被打了,那么也要按照这个乡镇的规矩处理,以此一层一层往上报。这个例子不准确的地方就是,现实中一个人因为一个事件只会被处理一次,不会因为同一件事情多次处理。


冒泡带来的烦恼

当上层(以及上上层,直至body元素)父级有子元素同样的方法,但你子元素的事件后,所有父级元素的同名函数也会从下到上,由里往外,挨个执行,但是大多数情况下,我们只希望子当事元素事件执行,不希望层层执行,这就要想办法阻止这种冒泡的情况发生。比如我们点击Child Span的时候只显示 Child Span的内容。结合刚刚的例子就是,村里发生了打人事件,在村里解决了,就没必要一层一层往上报,在层层处理了。


阻止事件冒泡的方法:

1 阻止事件继续往上层传递的过程

利用事件的stopPropagation()函数终止往父级元素冒泡的过程。

注意 该方法具有兼容性的问题,Event.stopPropagation()在支持W3C的浏览器中使用没有问题,但是在IE浏览器就失效了,在IE中使用 Event.cancelBubble=true来代替:

if (Event.stopPropagation){
  Event.stopPropagation(); 
}else{
  Event.cancelBubble=true;
}

注:而在vue中,则通过.stop阻止,例如:<div @click.stop='click1'></div>


2 通过事件委托,不阻止冒泡过程,但是让事件在冒泡到指定节点时再触发,不再是层层触发

这种方法同样不阻止事件的冒泡过程,同时也不在冒泡过程的各元素执行方法上添加判断,而是在冒泡过程中的某个父节点,对其所有下属的节点事件进行判断,然后执行相应的操作。

注意这个冒泡过程的最终节点,不一定要到body,到文档,到window,可以是冒泡过程中的任一一个终止冒泡的节点,所以我们可以在这个节点上,对其所有子元素的冒泡事件进行判断和处理。

这种元素本身触发事件,但是事件执行的方法不在元素本身,而是在其父元素的某个节点上,这种“模式叫做事件委托。


链接: http://www.fly63.com/article/detial/5270

Js事件循环机制 Event loop

队列的特征先进先出;js是单线程的,任务都是排队执行,不会同步执行对个任务;js分为同步(赋值,循环,分支语句)和异步(ajax,dom事件,定时器);事件循环机制

Event是什么?注册事件监听的方式有哪些?

Event 接口表示在 DOM 中发生的任何事件(常见事件); 一些是用户生成的(例如鼠标或键盘事件),而其他由 API 生成(例如指示动画已经完成运行的事件,视频已被暂停等等)。事件通常由外部源触发,同样也会以编程方式触发

如何在React中优雅的处理doubleClick?

上午楼主遇到一个需要处理双击事件的需求,在这里介绍下如何在触发doubleCLick时间的时候, 不触发click事件的解决办法, 顺便分享给大家。解决办法也很简单: 延迟 click事件的处理, 直到判断这个click 不在 doubleClick 中。

关于DOM事件流、DOM0级事件与DOM2级事件

DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window;流的概念,在现今的 JavaScript 中随处可见。比如说 React 中的单向数据流,Node 中的流

jQuery 的58种事件方法你都用过了吗?

jQuery 事件方法:事件方法触发或将函数附加到所选元素的事件处理程序。下表列出了用于处理事件的所有jQuery方法。blur()附加/触发模糊事件;change()附加/触发更改事件

jquery的on绑定点击事件执行两次的解决办法

jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的alert会执行两次,相应地数组删除也执行两次,具体代码如下

js事件委托(事件代理)

js中事件冒泡我们知道,子元素身上的事件会冒泡到父元素身上,事件代理就是本来加载子元素身上的事件,加在其父元素身上,其问起产生了,那么多的子元素怎么区分事件本应该是哪个子元素的。 答案就是event对象记录的事件源

vue事件修饰符

在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符,从而转变为使用 change事件进行同步;如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:

vue.js事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

对JS事件机制的深入理解

发生一个事件时,事件及事件处理句柄会被放入浏览器的事件队列,事件可归为以下几类:浏览器事件:window.load、document.DomContentLoaded等,网络请求事件:ajax、websocket

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全