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

来源:http://www.chinese-glasses.com 作者:Web前端 人气:90 发布时间:2020-05-06
摘要:时间: 2019-09-07阅读: 272标签: 事件 10bet,Angular组件和DOM元素通过事件与外部进行通信,两者中的事件绑定语法是相同的-="expression": 要理解事件冒泡机制,就得先了解事件。浏览器是事件

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

10bet,Angular组件和DOM元素通过事件与外部进行通信,两者中的事件绑定语法是相同的-="expression":

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

Click

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

DOM元素

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

DOM 元素触发的一些事件通过 DOM 层级结构传播,事件首先由最内层的元素开始,然后传播到外部元素,直到它们到根元素,这种传播过程称为事件冒泡。

什么是事件冒泡?

DOM事件冒泡与Angular可以无缝工作,具体示例如下:

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

import { Component } from '@angular/core';@Component({ selector: 'exe-app', template: `  Click  `})export class AppComponent { onClick() { console.log; }}

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

以上代码成功运行后,当用户点击 Click 按钮,浏览器控制台将会输出:

冒泡带来的烦恼

Click

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

即表示

阻止事件冒泡的方法:

元素上设置的监听函数被执行,也间接证明了事件冒泡能正常工作。

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

Angular Component

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

Angular 允许开发者通过 @Output() 装饰器和 EventEmitter 自定义事件。它不同于 DOM 事件,因为它不支持事件冒泡。

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

首先来看一下自定义组件如何监听DOM事件:

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

event-bubbling.component.ts

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

import { Component } from '@angular/core';@Component({ selector: 'event-bubbling', template: `  Click  `})export class EventBubblingComponent { }

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

app.component.ts

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

import { Component } from '@angular/core';@Component({ selector: 'exe-app', template: `    `})export class AppComponent { onClick() { console.log; }}

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

以上代码成功运行后,当用户点击 Click 按钮,浏览器控制台也会输出 Click。表示我们的自定义组件,也是可以正常处理组件内元素触发的 click 事件。但当我们在自定义组件中创建自定义事件时,事件名称也是使用 click ,那么会不会有问题呢?我们马上来实践一下。

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

Custom Events

event-bubbling.component

import { Component, Output, EventEmitter } from '@angular/core';@Component({ selector: 'event-bubbling', template: `  Button 1 Button 2  `})export class EventBubblingComponent { @Output() click = new EventEmitter(); onClick { this.click.next; }}

app.component.ts

import { Component } from '@angular/core';@Component({ selector: 'exe-app', template: `    `})export class AppComponent { onClick { console.log; }}

以上代码成功运行后,当用户点击 Button 1 按钮时,浏览器控制台将会输出:

Button 1 MouseEvent {isTrusted: true, screenX: 69, screenY: 161, clientX: 43, clientY: 22…}

我们看到控制台输出了两个信息,说明在这种情况下,Angular 可以处理自定义事件和 DOM 事件。当 click 事件触发后,onClick() 方法接收的 event 参数是 MouseEvent 对象。

那么要如何修复这个问题呢?我们可以利用 DOM 事件提供的防止冒泡的机制,即 stopPropagation() 方法。具体示例如下:

本文由10bet发布于Web前端,转载请注明出处:JS事件冒泡机制以及委托方法10bet,以及vue中的st

关键词:

最火资讯