angularjs学习笔记—事件指令
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学习笔记—事件指令的更多相关文章
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
- AngularJs学习笔记--Managing Service Dependencies
原版地址:http://docs.angularjs.org/guide/dev_guide.services.managing_dependencies angular允许service将其他ser ...
- AngularJs学习笔记--I18n/L10n
原版地址:http://code.angularjs.org/1.0.2/docs/guide/i18n 一.I18n and L10n in AngularJS 1. 什么是I18n和L10n? 国 ...
随机推荐
- Big Data Analytics for Security(Big Data Analytics for Security Intelligence)
http://www.infoq.com/articles/bigdata-analytics-for-security This article first appeared in the IEEE ...
- Altium Designer中使用差分对布线
Contents Language 在原理图中定义差分对 在PCB中查看和管理差分对 在PCB中定义差分对 适用的设计规则 设置设计规则的辖域 使用差分对向导定义规则 差分对布线 包括管脚交换的FPG ...
- java并发6-小结
为什么需要并发 并发其实是一种解耦合的策略,它帮助我们把做什么(目标)和什么时候做(时机)分开.这样做可以明显改进应用程序的吞吐量(获得更多的CPU调度时间)和结构(程序有多个部分在协同工作).做 ...
- makefile工程管理
个人理解吧,makefile就是写一个指定格式的文件,将一系列的编译.链接.转换等操作打包在一起,方便以后一键生成可执行的二进制文件而产生的.下面记录一下这种文件的写法,方便以后忘了来查询. make ...
- (转)awk命令
转自:http://man.lupaworld.com/content/manage/ringkee/awk.htm#id2874788 整理:Jims of 肥肥世家 <jims.yang@g ...
- Jmeter接口测试案例实践(一)
1.1. 接口介绍 本次测试的接口采用内网中的通讯录查询接口进行测试,接口参数如下: 1.2. 使用Jmeter进行接口测试 1.2.1. 打开Jmeter 下载好Jmeter后,双击bin目录下的j ...
- 整型数组处理算法(八)插入(+、-、空格)完成的等式:1 2 3 4 5 6 7 8 9=N[华为面试题]
有一个未完成的等式:1 2 3 4 5 6 7 8 9=N 当给出整数N的具体值后,请你在2,3,4,5,6,7,8,9这8个数字的每一个前面,或插入运算符号“+”,或插入一个运算符号“-”,或不插入 ...
- 大学生程序猿IT情书“2014爱的告白挑战赛”获奖名单及优秀情书展示系列之 - 【IT术语】情书+【搞笑另类】情书
经过专家评委们的层层精心评选和认真讨论,恭喜下面同学终于入选CSDN高校俱乐部"大学生程序猿IT情书2014爱的告白挑战赛活动"优胜者名单.获奖者将在本周内收到邮件通知.请依照邮件 ...
- 在Centos 5.6下安装 redis
先引用redis官方(http://redis.io/) 的介绍: Redis is an open source, advanced key-value store.<br>It is ...
- 世界最大射电望远镜(Arecibo)用于探測地外文明
请看下图: 这是眼下世界最大口径(305米)射电望远镜的外观图,位于美国中西部的PuertoRico州,建成于1963年,工作波段在3厘米至1米波段范围内,正好适合用于探測地外文明(SETI)的科学研 ...