Angularjs 事件指令详细整理
Angularjs事件指令详细整理
ngClick
适用标签:所有
触发条件:单击
#htmlclickme
ngDblclick
适用标签:所有
触发条件:双击
#htmlclickme
Angularjs事件指令详细整理
ngClick
适用标签:所有
触发条件:单击
#htmlclickme
ngDblclick
适用标签:所有
触发条件:双击
#htmlclickme
ngBlur
适用标签:
触发条件:失去焦点
#htmllink
ngFocus
适用标签:
触发条件:获取焦点
#htmllink #script angular.module('learnModule',[]) .controller('LearnCtrl',function($scope){ $scope.focus=function(){ alert('focus'); } });
ngChange
适用标签:input
触发条件:model更新
输入框的内容改变并不代表model的值更新。按我的理解,一般当两个状态互相切换时,model值会更新。两个状态我称之为合法状态和不合法状态。
不合法的状态:输入的内容不符合type类型,如email类型。输入的内容不符合校验条件,如ngMinlength。不合法的状态下,model会被更新成undefined。
合法的状态:输入的内容是符合类型和校验条件的。
#html#script angular.module('learnModule',[]) .controller('LearnCtrl',function($scope){ //$scope.text=''; $scope.change=function(){ alert('change'); } });
初始化和不初始化text的条件下,change触发是不一样的哦,这里涉及到model初始化和更新机制。
ngCopy
适用标签:
官方api上说使用的标签是这些,我没明白a和select复制有啥子用。另外,我换个div实际上也能触发copy事件。一般常用的就是input和textarea。
触发条件:复制。鼠标右键复制和快捷键Ctrl+C都会触发。
#html#script angular.module('learnModule',[]) .controller('LearnCtrl',function($scope){ $scope.copy=function(){ alert('copy'); } });
ngCut
适用标签:
触发条件:剪切。鼠标右键剪切和快捷键Ctrl+X都会触发。
#html#script angular.module('learnModule',[]) .controller('LearnCtrl',function($scope){ $scope.cut=function(){ alert('cut'); } });
ngPaste
适用标签:
a input select textarea
触发条件:粘贴。鼠标右键粘贴和快捷键Ctrl+V都会触发。
#html#script angular.module('learnModule',[]) .controller('LearnCtrl',function($scope){ $scope.paste=function(){ alert('paste'); } });
ngKeydown
适用标签:所有
个人感觉还是input和textarea比较常用
触发条件:键盘按键按下
要把$event传过去,一般都是要判断按了哪个按键的。
#html#script angular.module('learnModule',[]) .controller('LearnCtrl',function($scope){ $scope.keydown=function($event){ alert($event.keyCode); } });
ngKeyup
适用标签:所有
个人感觉还是input和textarea比较常用
触发条件:键盘按键按下并松开
#html#script angular.module('learnModule',[]) .controller('LearnCtrl',function($scope){ $scope.keyup=function($event){ alert($event.keyCode); } });
ngKeypress
适用标签:所有
个人感觉还是input和textarea比较常用
触发条件:键盘按键按下
#html#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。
ngMousedown
适用标签:所有
触发条件:鼠标按下,左右中间按下都会触发
#htmlbutton #script angular.module('learnModule',[]) .controller('LearnCtrl',function($scope){ $scope.mousedown=function($event){ alert($event.which); } });
ngMouseup
适用标签:所有
触发条件:鼠标按下弹起,左右中间按下弹起都会触发
#htmlbutton #script angular.module('learnModule',[]) .controller('LearnCtrl',function($scope){ $scope.mouseup=function($event){ alert($event.which); } });
ngMouseenter
适用标签:所有
触发条件:鼠标进入
#htmlbutton #script angular.module('learnModule',[]) .controller('LearnCtrl',function($scope){ $scope.mouseenter=function(){ alert('mouseenter'); } });
ngMouseleave
适用标签:所有
触发条件:鼠标离开
#htmlbutton #script angular.module('learnModule',[]) .controller('LearnCtrl',function($scope){ $scope.mouseleave=function(){ alert('mouseleave'); } });
ngMousemove
适用标签:所有
触发条件:鼠标移动
#htmlbutton #script angular.module('learnModule',[]) .controller('LearnCtrl',function($scope){ $scope.mousemove=function(){ alert('mousemove'); } });
ngMouseover
适用标签:所有
触发条件:鼠标进入
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持,如有疑问请留言或者到本站社区交流讨论,大家共同进步!