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 相关文章推荐
js中eval详解
Mar 30 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
JavaScript实现alert弹框效果
Nov 19 Javascript
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
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高级对象构建 工厂模式的使用
2012/02/05 PHP
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
Flask框架配置与调试操作示例
2018/07/23 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
某公司面试题
2012/03/05 面试题
2014迎新年晚会策划方案
2014/02/23 职场文书
外贸专业求职信
2014/03/09 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
大学生就业自荐书
2014/06/16 职场文书
2014最新离职证明范本
2014/09/12 职场文书
解析Redis Cluster原理
2021/06/21 Redis
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android