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

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

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

鼠标键盘事件: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,可以是冒泡过程中的任一一个终止冒泡的节点,所以我们可以在这个节点上,对其所有子元素的冒泡事件进行判断和处理。

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


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

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

$(document).on(click)点击事件在ios无效的解决方案

以上代码在Pc浏览器和android上都能触发点击事件,但是在ios上点击却完全没有反应。在查询相关资料后发现:在ios中这些元素没有click事件,div本身默认是不可点击的。

JavaScript 和 Node.js 中的“事件驱动”是什么意思?

事件驱动架构是建立在软件开发中一种通用模式上的,这种模式被称为发布-订阅或观察者模式。在事件驱动架构中,至少有两个参与者:主题(subject)和观察者(observer)。

如何给div、p添加onload事件?

其实只有 <body>、<frame>、<iframe>、<img>、<link>、<script>、<style> 这些标签才有onload事件,而div、p等标签是没有的。但如果我们还是想在div append到DOM时做一些事情该怎么办呢?

Js事件系统

提到事件,相信每位Javascript开发者都不会陌生,由于Javascript是先有实现,后有规范,因此,对于大部分人来说,事件模块可以说是比较模糊的,本文将从不同角度帮助你理清楚事件模块。

Openlayers 禁用鼠标双击缩放事件(ol.interaction.DoubleClickZoom)

openlayers地图加载时,默认会有9个交互事件,其中可以看到控制双击缩放事件的DoubleClickZoom,我们知道在绘制线时,结束的响应事件也是双击,所以在绘制线时和双击缩放事件就会冲突了。

Js事件的截获

利用事件的捕获阶段,添加事件。再利用触发事件元素(e.target)来判断(根据一定的标识或者某些特征)是否是我们需要劫持的dom。

vue.js 事件绑定

(1)使用v-on指令可以添加事件监听,语法:2)参数:$event就是当前触发事件的元素,即使不传$event,在回调函数中也可以使用event这个参数

cocoscreator 防止button连击多次触发事件

很多时候,ui上面的button都只需要单击触发一次,当用户快速连续点击时就有可能出现非意料的事情,解决这个问题很简单,只要规定button在指定间隔时间内只能触发一次就行。

jquery使用on()方法绑定的事件被执行多次的问题

jQuery用on()方法绑定了事件之后,在代码执行过程中,可能会遇到事件被多次执行的情况。本来以为是事件冒泡的问题,后来发现是on()方法的特性引起的问题。

Js中常用事件及说明

load页面加载完成时触发,beforeunload窗口关闭之前触发,unload窗口关闭时触发,focus窗口得到焦点时触发,blur窗口失去焦点时触发,error页面上有脚本报错时触发

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

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

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