JavaScript事件冒泡

这个处理的过程 就叫“冒泡”,就像水里的泡泡,是由下而上的。

注意:并不是所有的事件都有“冒泡”,例如focus等。

event.target 与 this的区别:

event.target:是查找发起事件的“目标”元素,在冒泡的过程中它是不会被改变的。

this :指的是当前元素

例如:如果我们有一个form.onclick的函数,它可以捕捉form内的所有点击事件,别管这个点击事件在form哪里触发,它都会冒泡到form这一层并且执行这个onclick函数。

在form.onclick函数里,this(=event.currentTarget)指的是

表单,因为这个event.target 指的是实际被点击到的表单中的元素。

看看下面这个例子,从这个例子可以更好的理解this与event.target的区别。

form.onclick = function(event) {
event.target.style.backgroundColor = 'yellow';

// chrome needs some time to paint yellow
setTimeout(() => {
alert("target = " + event.target.tagName + ", this=" + this.tagName);
event.target.style.backgroundColor = ''
}, 0);};

this.tagName:指的是FORM

event.target.tagName:指的是我们点击的哪个元素。

阻止冒泡

通常来讲, 冒泡事件会从目标元素一直上升到, 然后达到document对象,一些事件会达到window,并会调用“上升过程中”所有的对应的函数。so,如何阻止冒泡呢?

使用:event.stopPropagation()



点击Click me按钮时,body是不会有alert的动作。

event.stopImmediatePropagation()

如果一个元素上绑定了多个事件处理,我们使用stopPropagation停止掉其中一个冒泡,但是其他的冒泡仍在执行。

为了阻止当前元素及绑定事件的冒泡,需要使用event.stopImediatePropagation()函数。

注意:

通常没有必要去阻止泡沫的发生。一般的情况可以通过其他方式来解决。例如利用自定义事件或者可以将数据写入到事件的对象中。

博客园精华区稿源:博客园精华区 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » JavaScript事件冒泡

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录