全教育培训行业第三方平台平台就业机构
扫码试听
扫码试听
Q:2638333071
首页 > 课程问答 > > dom事件有冒泡机制而vue组件事件没有冒泡机制就是1个区别吗?(js事件冒泡与事件委托)
行业动态 行业问答 课程问答 零基础学习 就业前景 技术干货

dom事件有冒泡机制而vue组件事件没有冒泡机制就是1个区别吗?(js事件冒泡与事件委托)

发布时间:3 个 月 前 栏目:课程问答 浏览:

1、dom事件有冒泡机制而vue组件事件没有冒泡机制就是1个区别吗?

是的,DOM 事件和 Vue 组件事件的区别之一是 DOM 事件有冒泡机制,而 Vue 组件事件没有冒泡机制。

在 DOM 中,事件处理程序的响应顺序是按照事件冒泡的顺序进行的。也就是说,如果事件源是某个元素,那么该元素上的事件处理程序会首先被响应,然后逐层向上冒泡,直到到达文档根元素。在冒泡过程中,事件处理程序可以被调用多次,直到事件处理程序不被阻止为止。

相比之下,Vue 组件事件没有冒泡机制,事件处理程序的响应顺序是按照组件层级的顺序进行的。也就是说,如果事件源是某个组件,那么该组件上的事件处理程序会首先被响应,然后逐层向下,直到到达父组件。在响应过程中,事件处理程序可以被调用多次,直到事件处理程序不被阻止为止。

因此,DOM 事件和 Vue 组件事件的一个重要区别是事件处理程序的响应顺序和事件冒泡机制的不同。这也是开发者需要注意和区别的地方。

dom事件有冒泡机制而vue组件事件没有冒泡机制就是1个区别吗?

2、js什么是事件冒泡

事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。

假设一个元素div,它有一个下级元素p。

元素

这两个元素都绑定了click事件,如果用户点击了p,它在div和p上都触发了click事件,那这两个事件处理程序哪个先执行呢?事件顺序是什么?

两种模型

以前,Netscape和Microsoft是不同的实现方式。

Netscape中,div先触发,这就叫做事件捕获。

Microsoft中,p先触发,这就叫做事件冒泡。

s 和 iCab两种都不支持 。",

事件捕获

当你使用事件捕获时,父级元素先触发,子级元素后触发,即div先触发,p后触发。

事件冒泡

当你使用事件冒泡时,子级元素先触发,父级元素后触发,即p先触发,div后触发。

W3C模型

W3C模型是将两者进行中和,在W3C模型中,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达document。

程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。

true=捕获

false=冒泡

传统绑定事件方式

在一个支持W3C DOM的浏览器中,像这样一般的绑定事件方式,是采用的事件冒泡方式。

IE浏览器

如上面所说,IE只支持事件冒泡,不支持事件捕获,它也不支持addEventListener函数,不会用第三个参数来表示是冒泡还是捕获,它提供了另一个函数attachEvent。

附:事件冒泡(的过程):事件从发生的目标(event.srcElement||event.target)开始,沿着文档逐层向上冒泡,到document为止。

事件的传播是可以阻止的:

? 在W3c中,使用stopPropagation()方法

? 在IE下设置cancelBubble = true;

在捕获的过程中stopPropagation();后,后面的冒泡过程也不会发生了~

3.阻止事件的默认行为,例如click 后的跳转~

? 在W3c中,使用preventDefault()方法;

? 在IE下设置window.event.returnValue = false;

dom事件有冒泡机制而vue组件事件没有冒泡机制就是1个区别吗?

3、事件冒泡是什么如何用jquery阻止事件冒泡

1)什么是事件起泡

首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生。

当事件发生后,这个事件就要开始传播。为什么要传播呢?因为事件源本身并没有处理事件的能力。例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身不能处理这个事件(废话),事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件)。

当事件在传播过程中,找到了一个能够处理它的函数,这时候我们就说这个函数捕捉到了这个事件。

说到这里,关键的问题来了,那就是一个函数是如何捕捉一个事件的呢?这就涉及到事件的冒泡了。

为了更好地理解冒泡的概念,我建议你现在想象一下你的面前放着一杯水,但这杯水和我们平时看到的有点点不同,它分为数层,每一层又分成一或多个区域,最顶层是我们熟悉的窗口对象(即window对象),下一层分为好几个区域(document对象、history对象等等),而document对象的下一层又分为多个子对象。

这些对象的层次关系构成了DOM中的对象树。

事件的传播是有方向的,当点击一个按钮时所产生的事件从这个按钮处开始向上传播(就像一个水泡从杯底冒上来,这就是之所以叫事件冒泡的原因),但这个事件总是寻找特定的属性是否有值。例如按钮的click事件先寻找在按钮上是否有onclick属性的有意义的定义(即该属性指向一个存在的函数或一段可执行的语句),如果有,执行这个函数或语句;然后事件继续向上传播,到达按钮的上一层对象(例如一个form对象或document对象,总之是包含了按钮的父对象),如果该对象也定义了onclick属性,则执行属性的值。

所以,如果这个按钮上面有3层(form、document、window),且这三层都定义了onclick属性,则当按钮的click事件产生时,将会调用4个(包括按钮本身的一个)函数或执行4段语句。

事件的这几个特性在0级dom中也是适用的。

(2)jquery阻止事件起泡实例

1、通过返回false来取消默认的行为并阻止事件起泡。

jQuery 代码:

复制代码代码如下:

2、通过使用 stopPropagation() 方法只阻止一个事件起泡。

jQuery 代码:

复制代码代码如下:

4、社会现象

老师要求我们调查各种社会现象,好的坏的都行,给点题材,要好写的。要是报告,如青少年上网的百分率等等

5、vue中的事件冒泡和捕获(stop、capture)

对Dom的操作作为事件会从最外面的祖先Dom逐步传递到目标Dom(捕获过程),然后再从目标的Dom原路传出去(冒泡过程)。通常我们只监听冒泡过程。在vue中,当我们添加了事件修饰符capture后,才会变成捕获监听器。

这时我们有8个监听器了,在捕获过程和冒泡过程都有监听。输出如下图。

我们在js中通过addEventListener方法给Dom添加事件监听。这个方法有三个参数可以传递addEventListener(event,fn,useCapture)。event是事件类型click,focus,blur等;fn是事件触发时将执行的函数方法(function);第三个参数可以不传,默认是false,这个参数控制是否捕获触发。所以我们只穿两个参数时,这个事件是冒泡传递触发的,当第三个参数存在且为true时,事件是捕获传递触发的。

在不使用任何框架的情况下,我们在js中通过stopPropagation方法阻止事件继续传递。 使用框架时可使用对应的框架提供的方法。接下来我将了Vue框架的stop修饰符来阻止事件传递。 我们可以在传递过程中阻止事件继续传递,防止触发不需要的事件。

上一篇:没有了
技术干货
零基础学习
行业多年深耕,从这报名,学费立减800
  • 岳同学180****1241刚刚成功领取
  • 胡同学134****6431刚刚成功领取
  • 李同学150****6122刚刚成功领取
  • 张同学136****2231刚刚成功领取
  • 孙同学178****5521刚刚成功领取
  • 齐同学156****7788刚刚成功领取
猜你喜欢
查看更多
相关推荐
查看更多
现在学习,我的薪资能达到多少?
立即报名

联系我们:

Q:2638333071

鄂ICP备2023015464号