Angular 冒泡事件

今天就来个说个在新手时期很常遇到，但却不知为什麽会发生的问题

来看一下我们前几天的表单范例，与图上 console 的部份

在操控表单的时後，发现在点选新增栏位时，连submit 也一起被触发了！
这是怎麽一回事呢！！！明明就没有按送出呀！
原来是 JavaScript 里的冒泡事件。
这对经验丰富的前辈们来说，想必很快就能联想到这之间的问题，但对还是新手时期的小嫩嫩，却常常百思不得其解

而且在表单里很常遇到这问题，原因是因为通常表单的架构都会是这样

表单架构

.html

<!-- onSubmit -->
<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div
    formArrayName="favorites"
    *ngFor="let fav of favorites.controls; let idx = index"
  >
    <div [formGroupName]="idx">
      <ng-container *ngIf="idx === 0">
        <label for="">favorites：</label>
        <!-- 新增 Button -->
        <button (click)="addField()">新增</button>
        <br />
      </ng-container>
      <input formControlName="favorite" type="text" [value]="" />
      <button (click)="removeField(idx)">移除</button>
    </div>
  </div>
  <p style="color:red" *ngIf="form.errors?.phone">YOUR PHONE ERROR</p>
  <button type="submit">Submit</button>
</form>

在 onSubmit() 事件的里面，还有着其他事件，新增、移除，而当我点了新增按钮後，同时也会触发到 onSubmit() 这个事件

详细机制可参考以下，这里就不详细说明了

重新认识 JavaScript: Day 14 事件机制的原理
DOM 的事件传递机制：捕获与冒泡

事件预设行为

Angular 里的 (click) 会有一些预设行为，
目标事件决定了 $event 物件的形态。如果目标事件是来自原生 DOM 元素的，那麽 $event 是一个DOM 事件物件，它具有 target 和 target.value 等属性。

https://angular.tw/guide/event-binding-concepts#handling-events

该如何阻止它的行为产生呢？

在 html 里直接阻挡

<button (click)="$event.preventDefault();addField()">新增</button>

在 ts 里阻挡

.html

<button (click)="addField($event)">新增</button>

.ts

addField(e?: MouseEvent) {
  if (e) {
    e.preventDefault();
  }
}

以上两个方式都可以。
把 click 的预设事件给阻档掉就能避免其他事件被影响了！

今天的介绍就到此告一段落罗

参考资料：
事件系结的工作原理
重新认识 JavaScript: Day 14 事件机制的原理
DOM 的事件传递机制：捕获与冒泡