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应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
javascript实现在线客服效果
Jul 15 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
深入理解Angular中的依赖注入
Jun 26 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
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
9个JavaScript评级/投票插件
2010/01/18 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
浅析python中while循环和for循环
2019/11/19 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
python小项目之五子棋游戏
2019/12/26 Python
python实现人机五子棋
2020/03/25 Python
python之随机数函数的实现示例
2020/12/30 Python
公关关系专员的自我评价分享
2013/11/20 职场文书
军训生自我鉴定范文
2013/12/27 职场文书
业绩考核岗位职责
2014/02/01 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
学校实习推荐信
2015/03/27 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers