Angular 組件和 DOM 元素通過事件與外部進(jìn)行通信俘侠， Angular 事件綁定語法對于組件和 DOM 元素來說是相同的 - (eventName)="expression" ：
<button (click)="onClick()">Click</button>
DOM ELEMENTS
DOM 元素觸發(fā)的一些事件通過 DOM 層級結(jié)構(gòu)傳播。這種傳播過程稱為事件冒泡爷速。事件首先由最內(nèi)層的元素開始，然后傳播到外部元素莉给，直到它們到根元素廉沮。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');
}
}
以上代碼成功運(yùn)行后叁幢，當(dāng)用戶點(diǎn)擊 Click 按鈕曼玩，瀏覽器控制臺將會輸出：
Click
即表示 <div> 元素上設(shè)置的監(jiān)聽函數(shù)被執(zhí)行窒百，也間接證明了事件冒泡能正常工作。
Angular Component
Angular 允許開發(fā)者通過 @Output() 裝飾器和 EventEmitter 自定義事件样悟。它不同于 DOM 事件庭猩，因?yàn)樗恢С质录芭莅Ｔ诮榻B自定義事件前录肯，我們先來看一下自定義組件如何監(jiān)聽 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');
}
}
以上代碼成功運(yùn)行后优炬，當(dāng)用戶點(diǎn)擊 Click 按鈕蠢护，瀏覽器控制臺也會輸出 Click养涮。表示我們的自定義組件眉抬，也是可以正常處理組件內(nèi)元素觸發(fā)的 click 事件蜀变。但當(dāng)我們在自定義組件中創(chuàng)建自定義事件時(shí)介评，事件名稱也是使用 click ，那么會不會有問題呢贤惯？我們馬上來實(shí)踐一下棒掠。
Custom Events
event-bubbling.component.ts
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);
}
}
以上代碼成功運(yùn)行后烟很，當(dāng)用戶點(diǎn)擊 Button 1 按鈕時(shí)，瀏覽器控制臺將會輸出：
Button 1
MouseEvent {isTrusted: true, screenX: 69, screenY: 161, clientX: 43, clientY: 22…}
我們看到控制臺輸出了兩個信息恤筛，說明在這種情況下毒坛，Angular 可以處理自定義事件和 DOM (click) 事件林说。當(dāng) click 事件觸發(fā)后，onClick() 方法接收的 event 參數(shù)是 MouseEvent 對象豪直。
那么要如何修復(fù)這個問題呢珠移？我們可以利用 DOM 事件提供的防止冒泡的機(jī)制，即 stopPropagation() 方法暇韧。具體示例如下：
event-bubbling.component.ts
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'event-bubbling',
template: `
<div>
<button (click)="onClick($event, 'Button 1')">Button 1</button>
<button (click)="onClick($event, 'Button 2')">Button 2</button>
</div>
`
})
export class EventBubblingComponent {
@Output() click = new EventEmitter();
onClick(event: Event, button: string) {
event.stopPropagation();
this.click.next(button);
}
}
以上代碼成功運(yùn)行后懈玻，當(dāng)用戶點(diǎn)擊 Button 1 按鈕時(shí)追逮，只會輸出 Button 1 粹舵，即問題我們已經(jīng)修復(fù)了眼滤。
現(xiàn)在我們來總結(jié)一下：
- DOM 事件冒泡機(jī)制历涝，允許在父元素監(jiān)聽由子元素觸發(fā)的 DOM 事件
- Angular 支持 DOM 事件冒泡機(jī)制，但不支持自定義事件的冒泡堰塌。
- 自定義事件名稱與 DOM 事件的名稱如 (click分衫，change，select牵现，submit) 同名邀桑，可能會導(dǎo)致問題。雖然可以使用
stopPropagation()方法解決問題贼急，但實(shí)際工作中捏萍，不建議這樣使用。
介紹完上面的內(nèi)容腻异，接下來我們來介紹一下在 Angular 中如何實(shí)現(xiàn) Event Modifiers这揣。
Event Modifiers
在實(shí)際項(xiàng)目中给赞，我們經(jīng)常需要在事件處理器中調(diào)用 preventDefault() 或 stopPropagation() 方法：
- preventDefault() - 如果事件可取消矫户，則取消該事件，意味著該事件的所有默認(rèn)動作都不會發(fā)生柑蛇。需要注意的是該方法不會阻止該事件的冒泡。
- stopPropagation() - 阻止當(dāng)前事件在 DOM 樹上冒泡耻台。
對于 preventDefault() 方法，有一個經(jīng)典的應(yīng)用場景蹋砚。即當(dāng)我們希望點(diǎn)擊鏈接在新窗口打開頁面摄杂，但不希望當(dāng)前頁面跳轉(zhuǎn)。這個時(shí)候可以使用 preventDefault() 阻止后面將要執(zhí)行的瀏覽器默認(rèn)動作墨坚。
<a id="link" >Angular 4.x 修仙之路</a>
<script>
document.getElementById('link').onclick = function(ev) {
ev.preventDefault(); // 阻止瀏覽器默認(rèn)動作 (頁面跳轉(zhuǎn))
window.open(this.href); // 在新窗口打開頁面
};
</script>
一下子扯遠(yuǎn)了框杜，趕緊回到正題袖肥。在 Angular 中阻止 DOM 事件冒泡，我們可以使用以下兩種方式：
方式一
<div>
<button (click)="$event.stopPropagation(); doSomething()">Click me</button>
</div>
方式二
@Component({
selector: 'exe-app',
template: `
<div>
<button (click)="doSomething($event)">Click me</button>
</div>`
})
export class AboutComponent {
doSomething($event: Event) {
$event.stopPropagation();
// your logic
}
}
是不是感覺很麻煩油狂，每次都得顯式地調(diào)用 $event.stopPropagation() 方法专筷。有沒有更簡便的方法呢蒸苇？能不能使用聲明式的語法？在 Vue 中可以通過聲明式的方式味咳，解決我們上面的問題檬嘀。具體如下：
<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>
<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- the click event will be triggered at most once -->
<a v-on:click.once="doThis"></a>
接下來我們也來基于 Angular 的指令系統(tǒng)，實(shí)現(xiàn)上述的功能掂铐。最終的使用示例如下：
<div class="parent" (click)="fromParent()">
<button class="child" (click.stop)="fromChild()">Click me</button>
</div>
自定義 [click.stop] 指令
import { Directive, Output, EventEmitter, Renderer2, ElementRef } from '@angular/core';
@Directive({
selector: '[click.stop]'
})
export class StopPropagationDirective {
@Output("click.stop") stopPropEvent = new EventEmitter();
unsubscribe: () => void;
constructor(
private renderer: Renderer2, // Angular 2.x導(dǎo)入Renderer
private element: ElementRef) {
}
ngOnInit() {
this.unsubscribe = this.renderer.listen(
this.element.nativeElement, 'click', event => {
event.stopPropagation();
this.stopPropEvent.emit(event);
});
}
ngOnDestroy() {
this.unsubscribe();
}
}
[click.stop] 指令應(yīng)用
import { Component } from '@angular/core';
@Component({
selector: 'exe-app',
template: `
<div class="parent" (click)="fromParent()">
<button class="child" (click.stop)="fromChild()">Click me</button>
</div>
`
})
export class AppComponent {
fromChild() {
console.log('I am Child');
}
fromParent() {
console.log('I am Parent');
}
}
以上代碼成功運(yùn)行后爆班，當(dāng)用戶點(diǎn)擊 Click me 按鈕時(shí)辱姨，瀏覽器控制臺只會輸出 I am Child。若把 (click.stop) 改為 (click) 碗旅，當(dāng)用戶再次點(diǎn)擊 Click me 按鈕時(shí)镜悉，控制臺就會輸出兩條信息。有興趣的讀者旧困，可以親自驗(yàn)證一下哈稼锅。
