前端讲义64_AngularJS鼠标与键盘事件有关指令

最新推荐文章于 2023-03-03 11:52:24 发布

木生火

最新推荐文章于 2023-03-03 11:52:24 发布

阅读量364

点赞数

分类专栏： Angular

本文链接：https://blog.csdn.net/msh2016/article/details/91174288

版权

Angular 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

ngMousedown 触发条件：鼠标按下，左右中间按下都会触发
ngMouseup 触发条件：鼠标按下弹起，左右中间按下弹起都会触发
ngMouseenter 触发条件：鼠标进入
ngMouseleave 触发条件：鼠标离开
ngMousemove 触发条件：鼠标移动
ngMouseover 触发条件：鼠标进入

ngClick 触发条件：单击适用标签：所有
ngDblclick 触发条件：双击适用标签：所有

ngBlur 触发条件：失去焦点适用标签：a input select textarea
ngFocus 触发条件：获取焦点

ngChange 触发条件：model更新
ngCopy 触发条件：复制。鼠标右键复制和快捷键Ctrl+C都会触发
ngCut 触发条件：剪切。鼠标右键剪切和快捷键Ctrl+X都会触发
ngPaste 触发条件：粘贴。鼠标右键粘贴和快捷键Ctrl+V都会触发。

ngKeydown 触发条件：键盘按键按下，KeyDown 和KeyUp 可以捕获组合键。
ngKeyup 触发条件：键盘按键按下并松开
ngKeypress 触发条件：键盘按键按下，非字符键不会引发 KeyPress 事件
键盘事件发生的顺序
KeyDown -> KeyPress -> KeyUp
KeyDown 和 KeyPress 事件在按下键时发生，KeyUp 事件在释放键时发生
KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键
案例代码，通过按钮ngClick事件来隐藏 HTML 元素
ng-hide="true" HTML元素不可见，反之ng-hide="false" 为可见

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="mshApp" ng-controller="hrCtrl">
<button ng-click="click_hide()">隐藏/显示</button>
	<div ng-hide="myVar">
	工号: <input type=text ng-model="empID"><br>
	姓名: <input type=text ng-model="empName"><br><br>
	记录: {{empID + "- " + empName}}
	</div>
</div>
<script>
var app = angular.module('mshApp', []);
app.controller('hrCtrl', initEmp);
function initEmp($scope) {
    $scope.empID = "C10094207";
    $scope.empName = "木生火";
    $scope.myVar = false;
    $scope.click_hide = function() {
        $scope.myVar = !$scope.myVar;
    }
};
</script>
</body>
</html>

演示效果

木生火

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端讲义64_AngularJS鼠标与键盘事件有关指令

ngMousedown 触发条件：鼠标按下，左右中间按下都会触发ngMouseup 触发条件：鼠标按下弹起，左右中间按下弹起都会触发ngMouseenter 触发条件：鼠标进入ngMouseleave 触发条件：鼠标离开ngMousemove 触发条件：鼠标移动ngMouseover 触发条件：鼠标进入ngClick 触发条件：单击适用标签：所有ngDblclick ...
复制链接

扫一扫

专栏目录