Angular4.x Event (DOM事件和自定义事件)
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">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
按钮时,控制台就会输出两条信息。有兴趣的读者,可以亲自验证一下哈。
转自:
https://segmentfault.com/a/1190000009149495
Angular4.x Event (DOM事件和自定义事件)的更多相关文章
- javaScript事件机制深入学习(事件冒泡,事件捕获,事件绑定方式,移除事件方式,阻止浏览器默认行为,事件委托,模拟浏览器事件,自定义事件)
前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...
- jQuery-3.事件篇---自定义事件
jQuery自定义事件之trigger事件 众所周知类似于mousedown.click.keydown等等这类型的事件都是浏览器提供的,通俗叫原生事件,这类型的事件是需要有交互行为才能被触发. 在j ...
- jQuery基础(鼠标事件,表单事件,键盘事件,自定义事件 篇)
1.jQuery鼠标事件之click与dbclick事件 方法一:$ele.click()(不带参数) <div id="test">点击触发<div&g ...
- 63.ExtJs事件(自定义事件、on、eventManager)示例
转自:https://blog.csdn.net/leadergg/article/details/5927614?utm_source=blogxgwz5 ExtJs事件(自定义事件.on.even ...
- jQuery on() 方法 为选定已存在元素和未来元素绑定标准事件和自定义事件
很有必要说说jQuery的on方法,这个方法存在大乾坤大奥秘,主要注意两点: 1.为已存在元素和未来元素(动态添加元素)绑定处理函数. 2.自定义一个非标准的事件并绑定处理函数. 定义和用法 on() ...
- jQuery事件命名空间多事件绑定自定义事件js 命名空间 javascript命名空间
http://blog.csdn.net/pigpigpig4587/article/details/24727791 jQuery事件命名空间 jQuery支持事件命名空间,以方便事件管理.例如,在 ...
- js原生创建模拟事件和自定义事件的方法
让我万万没想到的是,原来<JavaScript高级程序设计(第3版)>里面提到的方法已经是过时的了.后来我查看了MDN,才找到了最新的方法. 模拟鼠标事件MDN上已经说得很清楚,尽管为了保 ...
- Spring容器事件、自定义事件
Spring容器内置事件,如容器的启动.停止.关闭.销毁等事件 <bean name="contextStartedHandler" class="com.nuts ...
- jQuery事件之自定义事件
其实事件的bind和unbind,都是为了自定义事件做准备. 语法: $(selector).trigger(type, data); 作用:在每一个匹配的元素上触发某类事件,它触发的是由bind() ...
随机推荐
- GitHub 设置首页显示 404 There isn't a GitHub Pages site here.
问题如题! 能使用的必要条件是: 1.创建的仓库 Code 中 必须 有 README.md 文件,内容自定 2.设置模板在仓库中 Settings -->GitHub Pages --> ...
- java.lang.NoClassDefFoundError 错误
练习jfianl,,,配置数据库插件的时候遇到: java.lang.NoClassDefFoundError: com/mchange/v2/c3p0/ComboPooledDataSource 解 ...
- LeetCode 19 - 删除链表的倒数第N个节点 - [链表]
题目链接:https://leetcode-cn.com/problems/remove-nth-node-from-end-of-list/ 题解: 两个 $p,q$ 指针均指向头,然后 $q$ 先 ...
- Presto实战
一.Presto简介 1.PRESTO是什么? Presto是一个开源的分布式SQL查询引擎,适用于交互式分析查询,数据量支持GB到PB字节. Presto的设计和编写完全是为了解决像Facebook ...
- [bash] 几个以前没注意过的小知识
1. BASH_SOURCE[0] 是啥意思,以及获取当前脚本所在目录 BASH_SOURCE[] 等价于 BASH_SOURCE, 取得当前执行的shell文件所在的路径及文件名. 如/home/ ...
- Servlet 随记:
API 1)init(ServletConfig config) 何时执行:servlet对象创建的时候执行 ServletConfig : 代表的是该servlet对象的配置信息 2)service ...
- 下载工具axel 和 mwget
axel, yum安装或者apt-get安装 但有时axel不行,需要上wget,但单线程的太慢,需要安装mwget.apt-get -y install intltoolwget http://ja ...
- iPhone IOS10安装APP没提示连接网络(无法联网)的解决办法
iPhone升级ios10之后,遇到如标题所述问题时: 1.退出APP,设置-蜂窝移动网络-无线局域网助理-开启 2.进入APP,这时候就回提示连接网络了. 提醒: 数据流量有限的朋友,平时请关闭&q ...
- postgres密码修改
. 修改PostgreSQL数据库默认用户postgres的密码 PostgreSQL数据库创建一个postgres用户作为数据库的管理员,密码随机,所以需要修改密码,方式如下: 步骤一:登录Post ...
- 《linux就该这么学》第九节课:第七章,RAID阵列和LVM逻辑卷技术
笔记 (借鉴请改动) 7.1.RAID(独立冗余磁盘阵列) 常见的几种RAID:RAID0,RAID1,RAID5,RAID10 raid0 实现写入速度但安全性略低. raid1 实现了速度和 ...