ngClick

适用标签:所有
触发条件:单击

#html
<div ng-controller="LearnCtrl">
<div ng-click="click()">click me</div>
<button ng-click="click()">click me</button>
</div> #script
angular.module('learnModule', []) .controller('LearnCtrl', function ($scope) {
$scope.click = function () {
alert('click');
}
});

ngDblclick

适用标签:所有
触发条件:双击

#html
<div ng-controller="LearnCtrl">
<div ng-dblclick="dblclick()">click me</div>
<button ng-dblclick="dblclick()">click me</button>
</div> #script
angular.module('learnModule', []) .controller('LearnCtrl', function ($scope) {
$scope.dblclick = function () {
alert('click');
}
});

ngBlur

适用标签:

  • a

  • input

  • select

  • textarea

触发条件:失去焦点

#html
<div ng-controller="LearnCtrl">
<a href="" ng-blur="blur()">link</a> <input type="text" ng-blur="blur()"/>
<textarea cols="" rows="" ng-blur="blur()"></textarea>
<select ng-blur="blur()">
<option>----</option>
<option>jacky</option>
<option>rose</option>
</select>
</div> #script
angular.module('learnModule', []) .controller('LearnCtrl', function ($scope) {
$scope.blur = function () {
alert('blur');
}
});

ngFocus

适用标签:

  • a

  • input

  • select

  • textarea

触发条件:获取焦点

#html
<div ng-controller="LearnCtrl">
<a href="" ng-focus="focus()">link</a> <input type="text" ng-focus="focus()"/>
<textarea cols="" rows="" ng-focus="focus()"></textarea>
<select ng-focus="focus()">
<option>----</option>
<option>jacky</option>
<option>rose</option>
</select>
</div> #script
angular.module('learnModule', []) .controller('LearnCtrl', function ($scope) {
$scope.focus= function () {
alert('focus');
}
});

ngChange

适用标签:input
触发条件:model更新

输入框的内容改变并不代表model的值更新。按我的理解,一般当两个状态互相切换时,model值会更新。两个状态我称之为合法状态和不合法状态。

不合法的状态:输入的内容不符合type类型,如email类型。输入的内容不符合校验条件,如ngMinlength。不合法的状态下,model会被更新成undefined

合法的状态:输入的内容是符合类型和校验条件的。

#html
<div ng-controller="LearnCtrl">
<input type="text" ng-model="text" ng-change="change()" ng-minlength=""/>
</div> #script
angular.module('learnModule', []) .controller('LearnCtrl', function ($scope) {
//$scope.text='';
$scope.change = function () {
alert('change');
}
});

初始化和不初始化text的条件下,change触发是不一样的哦,这里涉及到model初始化和更新机制。

ngCopy

适用标签:

  • a

  • input

  • select

  • textarea

官方api上说使用的标签是这些,我没明白a和select复制有啥子用。另外,我换个div实际上也能触发copy事件。一般常用的就是input和textarea。

触发条件:复制。鼠标右键复制和快捷键Ctrl+C都会触发。

#html
<div ng-controller="LearnCtrl">
<input type="text" ng-copy="copy()"/>
<textarea cols="" rows="" ng-copy="copy()"></textarea>
</div> #script
angular.module('learnModule', []) .controller('LearnCtrl', function ($scope) {
$scope.copy = function () {
alert('copy');
}
});

ngCut

适用标签:

  • a

  • input

  • select

  • textarea

    触发条件:剪切。鼠标右键剪切和快捷键Ctrl+X都会触发。

#html
<div ng-controller="LearnCtrl">
<input type="text" ng-cut="cut()"/>
<textarea cols="" rows="" ng-cut="cut()"></textarea>
</div> #script
angular.module('learnModule', []) .controller('LearnCtrl', function ($scope) {
$scope.cut = function () {
alert('cut');
}
});

ngPaste

适用标签:

  • a

  • input

  • select

  • textarea

    触发条件:粘贴。鼠标右键粘贴和快捷键Ctrl+V都会触发。

#html
<div ng-controller="LearnCtrl">
<input type="text" ng-paste="paste()"/>
<textarea cols="" rows="" ng-paste="paste()"></textarea>
</div> #script
angular.module('learnModule', []) .controller('LearnCtrl', function ($scope) {
$scope.paste = function () {
alert('paste');
}
});

ngKeydown

适用标签:所有

个人感觉还是input和textarea比较常用

触发条件:键盘按键按下

要把$event传过去,一般都是要判断按了哪个按键的。

#html
<div ng-controller="LearnCtrl">
<input type="text" ng-keydown="keydown($event)"/>
<textarea cols="" rows="" ng-keydown="keydown($event)"></textarea>
</div> #script
angular.module('learnModule', []) .controller('LearnCtrl', function ($scope) {
$scope.keydown = function ($event) {
alert($event.keyCode);
}
});

ngKeyup

适用标签:所有

个人感觉还是input和textarea比较常用

触发条件:键盘按键按下并松开

#html
<div ng-controller="LearnCtrl">
<input type="text" ng-keyup="keyup($event)"/>
<textarea cols="" rows="" ng-keyup="keyup($event)"></textarea>
</div> #script
angular.module('learnModule', []) .controller('LearnCtrl', function ($scope) {
$scope.keyup = function ($event) {
alert($event.keyCode);
}
});

ngKeypress

适用标签:所有

个人感觉还是input和textarea比较常用

触发条件:键盘按键按下

#html
<div ng-controller="LearnCtrl">
<input type="text" ng-keypress="keypress($event)"/>
<textarea cols="" rows="" ng-keypress="keypress($event)"></textarea>
</div> #script
angular.module('learnModule', []) .controller('LearnCtrl', function ($scope) {
$scope.keypress = function ($event) {
alert($event.keyCode);
}
});

keydown,keypress,keydown三者区别

引发事件的按键

非字符键不会引发 KeyPress 事件,但非字符键却可以引发 KeyDown 和 KeyUp 事件。

事件引发的时间

KeyDown 和 KeyPress 事件在按下键时发生,KeyUp 事件在释放键时发生。

事件发生的顺序

KeyDown -> KeyPress -> KeyUp。如果按一个键很久才松开,发生的事件为:KeyDown -> KeyPress -> KeyDown -> KeyPress -> KeyDown -> KeyPress -> ... -> KeyUp。

  • KeyDown触发后,不一定触发KeyUp,当KeyDown 按下后,拖动鼠标,那么将不会触发KeyUp事件。

  • KeyPress主要用来捕获数字(注意:包括Shift+数字的符号)、字母(注意:包括大小写)、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符。

  • KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键)。

  • KeyPress 只能捕获单个字符。

  • KeyDown 和KeyUp 可以捕获组合键。

  • KeyPress 可以捕获单个字符的大小写。

  • KeyDown和KeyUp 对于单个字符捕获的KeyValue 都是一个值,也就是不能判断单个字符的大小写。

  • KeyPress 不区分小键盘和主键盘的数字字符。

  • KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。

  • 其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。

ngMousedown

适用标签:所有
触发条件:鼠标按下,左右中间按下都会触发

#html
<div ng-controller="LearnCtrl">
<button ng-mousedown="mousedown($event)">button</button>
</div> #script
angular.module('learnModule', []) .controller('LearnCtrl', function ($scope) {
$scope.mousedown = function ($event) {
alert($event.which);
}
});

ngMouseup

适用标签:所有
触发条件:鼠标按下弹起,左右中间按下弹起都会触发

#html
<div ng-controller="LearnCtrl">
<button ng-mouseup="mouseup($event)">button</button>
</div> #script
angular.module('learnModule', []) .controller('LearnCtrl', function ($scope) {
$scope.mouseup = function ($event) {
alert($event.which);
}
});

ngMouseenter

适用标签:所有
触发条件:鼠标进入

#html
<div ng-controller="LearnCtrl">
<button ng-mouseenter="mouseenter()">button</button>
</div> #script
angular.module('learnModule', []) .controller('LearnCtrl', function ($scope) {
$scope.mouseenter = function () {
alert('mouseenter');
}
});

ngMouseleave

适用标签:所有
触发条件:鼠标离开

#html
<div ng-controller="LearnCtrl">
<button ng-mouseleave="mouseleave()">button</button>
</div> #script
angular.module('learnModule', []) .controller('LearnCtrl', function ($scope) {
$scope.mouseleave = function () {
alert('mouseleave');
}
});

ngMousemove

适用标签:所有
触发条件:鼠标移动

#html
<div ng-controller="LearnCtrl">
<button ng-mousemove="mousemove()">button</button>
</div> #script
angular.module('learnModule', []) .controller('LearnCtrl', function ($scope) {
$scope.mousemove = function () {
alert('mousemove');
}
});

ngMouseover

适用标签:所有
触发条件:鼠标进入

#html
<div ng-controller="LearnCtrl">
<button ng-mouseover="mouseover()">button</button>
</div> #script
angular.module('learnModule', []) .controller('LearnCtrl', function ($scope) {
$scope.mouseover= function () {
alert('mouseover');
}
});

angularjs学习笔记—事件指令的更多相关文章

  1. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  2. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  3. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  4. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  5. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  6. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  7. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  8. AngularJs学习笔记--Managing Service Dependencies

    原版地址:http://docs.angularjs.org/guide/dev_guide.services.managing_dependencies angular允许service将其他ser ...

  9. AngularJs学习笔记--I18n/L10n

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/i18n 一.I18n and L10n in AngularJS 1. 什么是I18n和L10n? 国 ...

随机推荐

  1. WIN7下关闭驱动数字签名检查的方法

    内容是转的,最后一步貌似没什么用处,水印是去不掉的,不过也无所谓,关键是驱动能用了,要不完全瞎了 实测win7 32位旗舰版可用   ================================= ...

  2. 硝烟中的Scrum和XP-我们如何实施Scrum 4 (Part 1/2)

    4 制定Sprint计划 计划是Scrum中重要的一环; 是为了让团队获得足够信息, 不受打扰地工作, 增加团队的信心; Planning的成果: 1) Sprint目标 2) 团队成员名单(时间百分 ...

  3. velocity自定义动画

         话说好久没有写博客了,零星的整理了一些东西,没有形成系统,所以也没有在这里记录.        废话不多说了,进入今天的正题.不知道大家是否记得之前写过的一篇文章<制作炫酷的专题页面& ...

  4. 解析了grid2008的代码

    import java.io.IOException; import java.util.ArrayList; import java.util.HashMap; import java.util.L ...

  5. lesson8:AtomicInteger源码解析及性能分析

    AtomicInteger等对象出现的目的主要是为了解决在多线程环境下变量计数的问题,例如常用的i++,i--操作,它们不是线程安全的,AtomicInteger引入后,就不必在进行i++和i--操作 ...

  6. SD卡中FAT32文件格式高速入门(图文具体介绍)

    说明: MBR :Master Boot Record ( 主引导记录) DBR :DOS Boot Record ( 引导扇区) FAT :File Allocation Table ( 文件分配表 ...

  7. 路由器WAN口和LAN口详解

    前一阵子做路由器的联网,由于利用了Openwrt操作系统,做起来虽然方便,但是很多原理细节都被忽略了.所以这里再来老生常谈一下wan口和lan口的区别,以及他们之间的工作原理. 首先百度一下,基本知识 ...

  8. Myeclipse7.5 下载 安装 注冊 注冊码 100%成功

    myeclipse7.5启动画面 1.下载Myeclipse官方原版 官方原版:或者 http://downloads.myeclipseide.com/downloads/products/ewor ...

  9. Hibernate介绍

    1.什么是Hibernate? 首先,Hibernate是数据持久层的一个轻量级框架.数据持久层的框架有很多比如:iBATIS,myBatis,Nhibernate,Siena等等. 并且Hibern ...

  10. [Angular 2] Async Http

    Async Pipe: The Asynce pipe receive a Promise or Observable as  input and subscribes to the input, e ...