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="30" rows="10" 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="30" rows="10" 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。
合法的状态:输入的内容是符合类型和校验条件的。
初始化和不初始化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="30" rows="10" 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="30" rows="10" 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="30" rows="10" 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="30" rows="10" 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="30" rows="10" 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="30" rows="10" 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
适用标签:所有
触发条件:鼠标进入
个人感觉和ngMouseenter没啥子区别
转载于:https://www.cnblogs.com/webloo/p/4900368.html
angularjs 事件指令相关推荐
- 【12】AngularJS 事件
AngularJS 事件 AngularJS 有自己的 HTML 事件指令. ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. <div ng-app=&qu ...
- angularjs directive scope变化为啥html,学习AngularJs:Directive指令用法(完整版)
本教程使用AngularJs版本:1.5.3 摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR ...
- AngularJS - 自定义指令
这一篇从自定义指令出发,记录了定义一个指令时影响指令行为的各种因素. 试着感受这些因素,让自己更高效地编写AngularJS应用. Directive 先从定义一个简单的指令开始. 定义一个指令本质上 ...
- AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html><head><meta charset="utf-8"><title>Ang ...
- AngularJS自定义指令详解(有分页插件代码)
前言 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 通过 .directive() 函数来添加自定义的指令. 调用自定义指令时,需要在HTMl 元素上添加自定义指令名. 自定义指 ...
- AngularJS 事件
ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. <!DOCTYPE html> <html><head><meta ch ...
- angular与angularjs常用指令的不同写法整理
angularjs与angular 常用的指令写法的区别; 一:angularjs指令 1.ng-bind 使用给定的变量或表达式的值来替换 HTML 元素的内容 <p ng-bind=&quo ...
- AngularJS封装指令实现下拉刷新自动翻页加载数据
目前PC的网页越来越流行瀑布流的下拉刷新自动加载数据,本文来讲解一下. 滚动翻页基本原理就是判断scrollTop和offsetHeight之和 大于等于 scrollHeight. 一.不适用Jqu ...
- angularJS自定义指令详解
AngularJS指令在HTML代码中可以有四种表现形式: 1.作为一个新的HTML元素来使用. <hello></hello>或者<hello/> 2.作为一个元 ...
最新文章
- Blender三维建模和动画风格化的东方场景视频教程
- Gluster 常用命令
- Python列表操作:统计列表中的重复项出现的次数的方法,不懂也要知道的python知识
- java varbinary_SQL 中存放 varbinary型数据
- 揭秘“清华园”的“N”种打开方式!
- 解决the resource is not on the build path of a java project
- Java RandomAccessFile getFilePointer()方法与示例
- 读入10个数,显示互不相同的数的数目,并以输人的顺序输出
- # android开发:4-1、Activity启动方式、生命周期、不同activity的数据传递
- 总结在开发中常用的Linux命令
- 双电容单相电机接线图解_拿走不谢!75例自动控制原理图、接线图
- oracle学习-数据迁移
- Android之线性布局的4个重要参数
- 2020年计算机组装行业,组装电脑已成夕阳产业?DIY装机发展的道路在何方?
- 深度定制游戏引擎实现云服务器的非线性增长
- android中RecyclerView添加下划线
- Android 对于外部TF(SD)卡和U盘的读写操作
- c语言指针存在哪,C语言指针你弄明白了吗
- 免费快速提升网站流量之方法大结合(转摘有修改)
- 【计算机三级信息安全】访问控制模型
热门文章
- hdu 4333 Revolving Digits
- 大专学历造假改成了211, 拿到了抖音Offer
- 奥迪推出大型自动驾驶数据集A2D2
- 视觉推理新杀器!英特尔新一代VPU性能翻10倍,反超英伟达
- linux如何将文件夹添加到书签,桌面应用|[新手技巧] 如何在Ubuntu中添加和删除书签...
- Python自学真的可以学好嘛?
- 【机器学习】机器学习从零到掌握之六 -- 教你使用验证分类器测试算法
- Github | PyTorch实现的深度强化学习算法集
- 重磅 | 阿里AI labs百万美元年薪聘请两位顶级视觉科学家
- 实战深度强化学习DQN-理论和实践