Angular事件绑定

作者: readilen | 来源:发表于2018-04-15 09:54 被阅读15次

目前Angular 5 支持的事件

(focus)="myMethod()"  // An element has received focus
(blur)="myMethod()"   // An element has lost focus

(submit)="myMethod()"  // A submit button has been pressed

(scroll)="myMethod()"

(cut)="myMethod()"
(copy)="myMethod()"
(paste)="myMethod()"

(keydown)="myMethod()"
(keypress)="myMethod()"
(keyup)="myMethod()"

(mouseenter)="myMethod()"
(mousedown)="myMethod()"
(mouseup)="myMethod()"

(click)="myMethod()"
(dblclick)="myMethod()"

(drag)="myMethod()"
(dragover)="myMethod()"
(drop)="myMethod()"

組件模板中的使用方法

<button (click)="myEvent($event)">My Button</button>

組件中

export class AppComponent {
  
  myEvent(event) {
    console.log(event);
  }

}

事件类型一览表

相关文章

  • 重构过程中的信息记录二

    Angular深入理解之指令 angular 事件绑定/属性绑定 @HostListener ,@HostBind...

  • Angular 4 事件冒泡

    Angular 组件和 DOM 元素通过事件与外部进行通信, Angular 事件绑定语法对于组件和 DOM 元素...

  • Angular事件绑定

    目前Angular 5 支持的事件 組件模板中的使用方法 組件中 事件类型一览表

  • Angular 8 事件绑定

    Angular 事件绑定 一般格式 例如: 两种写法都是合法的 $event 对象 $event 对象为 DOM ...

  • Angular学习笔记-双向绑定

    Angular和Vue一样都是MVVM的框架,MVVM的核心机制就是双向绑定。 双向绑定将属性绑定与事件绑定结合在...

  • Angular小积累

    angular自动生成组件命令: 绑定事件: 模板中循环语句: 定义数据: 属性绑定用方括号:[src]="img...

  • Angular2 组件(页面)之间如何传值

    组件有两种方式将数据传递:“属性绑定”和“事件绑定”。 在Angular 2中,数据和事件变化检测从上到下发生从 ...

  • angular-2

    angular基础模板语法 文本绑定 {{}} html绑定 [innerHTML]="xxx" 属性绑定 [属性...

  • Angular 入门

    Angular介绍 Angular安装、创建项目、目录结构、组件、服务 创建组件、绑定数据、绑定属性、数据循环、条...

  • angular(一)核心概念

    其实,就是angular通过ng-model为我们绑定了一个keydown事件,它会通过$watch 指令监视变量...

网友评论

    本文标题:Angular事件绑定

    本文链接:https://www.haomeiwen.com/subject/qccdkftx.html