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