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


Posted in Javascript onOctober 09, 2018

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…}

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

那么要如何修复这个问题呢?我们可以利用 DOM 事件提供的防止冒泡的机制,即 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);
 }
}

以上代码成功运行后,当用户点击 Button 1 按钮时,只会输出 Button 1 ,即问题我们已经修复了。

现在我们来总结一下:

DOM 事件冒泡机制,允许在父元素监听由子元素触发的 DOM 事件

Angular 支持 DOM 事件冒泡机制,但不支持自定义事件的冒泡。

自定义事件名称与 DOM 事件的名称如 (click,change,select,submit) 同名,可能会导致问题。虽然可以使用 stopPropagation() 方法解决问题,但实际工作中,不建议这样使用。

Event Modifiers

在实际项目中,我们经常需要在事件处理器中调用 preventDefault() 或 stopPropagation() 方法:

preventDefault() - 如果事件可取消,则取消该事件,意味着该事件的所有默认动作都不会发生。需要注意的是该方法不会阻止该事件的冒泡

stopPropagation() - 阻止当前事件在 DOM 树上冒泡

对于 preventDefault() 方法,有一个经典的应用场景。即当我们希望点击链接在新窗口打开页面,但不希望当前页面跳转。这个时候可以使用 preventDefault() 阻止后面将要执行的浏览器默认动作。

<a id="link" href="https://i.cnblogs.com/EditPosts.aspx?postid=7792556" rel="external nofollow" >Angular 4.x 事件冒泡</a>
<script>
 document.getElementById('link').onclick = function(ev) {
 ev.preventDefault(); // 阻止浏览器默认动作 (页面跳转)
 window.open(this.href); // 在新窗口打开页面
 };
</script>

在 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
 }
}

是不是感觉很麻烦,每次都得显式地调用 $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 的指令系统,实现上述的功能。最终的使用示例如下:

<div class="parent" (click)="fromParent()">
 <button class="child" (click.stop)="fromChild()">Click me</button>
</div>

自定义 [click.stop] 指令

@Directive({
 selector: '[click.stop]'
})
export class StopPropagationDirective {
 @Output("click.stop") stopPropEvent = new EventEmitter();
 unsubscribe: () => void;

 constructor(
 private renderer: Renderer2, // Angular 2.x导入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] 指令应用

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

以上代码成功运行后,当用户点击 Click me 按钮时,浏览器控制台只会输出 I am Child。若把 (click.stop) 改为 (click) ,当用户再次点击 Click me 按钮时,控制台就会输出两条信息。有兴趣的读者,可以亲自验证一下哈。

这篇Angular4.x Event (DOM事件和自定义事件详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
js中int和string数据类型互相转化实例
Jan 16 Javascript
js常用正则表达式集锦
May 17 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 #Javascript
vue router 源码概览案例分析
Oct 09 #Javascript
Angular4 Select选择改变事件的方法
Oct 09 #Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 #Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 #Javascript
vue发送ajax请求详解
Oct 09 #Javascript
AngularJS 监听变量变化的实现方法
Oct 09 #Javascript
You might like
PHP 输出简单动态WAP页面
2009/06/09 PHP
求PHP数组最大值,最小值的代码
2011/10/31 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
日期 时间js控件
2009/05/07 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
python matplotlib中文显示参数设置解析
2017/12/15 Python
python3.6数独问题的解决
2019/01/21 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
Python列表如何更新值
2020/05/27 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
华为C++笔试题
2014/08/05 面试题
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
中医临床专业自我鉴定范文
2014/01/15 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
纯html+css实现Element loading效果
2021/08/02 HTML / CSS
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB
Java线程的6种状态与生命周期
2022/05/11 Java/Android
Springboot中如何自动转JSON输出
2022/06/16 Java/Android