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);
  }
}

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

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