Angular4.x Event (DOM事件和自定义事件详解)

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

<button (click)="onClick()">Click</button>

DOM元素

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

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

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

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

Click

即表示 <div> 元素上设置的监听函数被执行，也间接证明了事件冒泡能正常工作。

Angular Component

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

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

event-bubbling.component.ts

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

app.component.ts

import { Component } from '@angular/core';@Component({ selector: 'exe-app', template: ` <div> <event-bubbling (click)="onClick()"></event-bubbling> </div> `})export class AppComponent { onClick() { console.log('Click'); }}

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

Custom Events

event-bubbling.component

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

app.component.ts

import { Component } from '@angular/core';@Component({ selector: 'exe-app', template: ` <div> <event-bubbling (click)="onClick($event)"></event-bubbling> </div> `})export class AppComponent { onClick(event: any) { console.log(event); }}