AngularJS事件指令（个人笔记）

最新推荐文章于 2024-01-06 22:56:52 发布

万德佛

最新推荐文章于 2024-01-06 22:56:52 发布

阅读量347

点赞数

分类专栏： angularJs 前端文章标签： angularjs 前端

本文链接：https://blog.csdn.net/qq_39251440/article/details/109506655

版权

前端同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

angularJs

1 篇文章 0 订阅

订阅专栏

温馨提示:

(1)记得引入angular.min.js

(2)按F12打开控制台,选择console，可以查看事件起到作用且成功打印

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- AngularJS支持以下事件:
		 ng-click 单击
		 ng-dbl-click/ng-dblclick 双击
		 ng-mousedown 鼠标按下，左右中间按下都会触发
		 ng-mouseenter 鼠标进入
		 ng-mouseleave 鼠标离开
		 ng-mousemove/ngMouseenter 鼠标移动
		 ng-Mouseup 鼠标按下弹起，左右中间按下弹起都会触发
		 ng-keydown  键盘按键按下
		 ng-keyup 键盘按键按下并松开
		 ng-keypress 键盘按键按下
		 ng-Change model更新,发生改变
		 ng-Blur 失去焦点
		 ng-Focus 获取焦点
		 ng-Copy 复制。鼠标右键复制和快捷键Ctrl+C都会触发。
		 ng-Cut 剪切。鼠标右键剪切和快捷键Ctrl+X都会触发。
		 ng-Paste 粘贴。鼠标右键粘贴和快捷键Ctrl+V都会触发。
		 -->
		 <!-- 单机 -->
		<div ng-controller="myCtrl1">
			<div ng-click="click()">click me</div>
			<button ng-click="click()">click me</button>
		</div>
		<!-- 双击 -->
		<div ng-controller="myCtrl2">
		    <div ng-dblclick="dblclick()">click me</div>
		    <button ng-dblclick="dblclick()">click me</button>
		</div>
		<!-- 失去焦点 -->
		<div ng-controller="myCtrl3">
		    <!-- <a href="" ng-blur="blur()">link</a> -->
		    <input type="text" ng-blur="blur()" value="失去焦点"/>
		    <textarea cols="30" rows="10" ng-blur="blur()">失去焦点</textarea>
		    <select ng-blur="blur()">
		        <option>----</option>
		        <option>jacky</option>
		        <option>rose</option>
		    </select>
		</div>
		<!-- 获取焦点 -->
		<div ng-controller="myCtrl4">
		  <!--  <a href="" ng-focus="focus()">link</a> -->
		
		    <input type="text" ng-focus="focus()" value="获取焦点"/>
		    <textarea cols="30" rows="10" ng-focus="focus()">获取焦点</textarea>
		    <select ng-focus="focus()">
		        <option>----</option>
		        <option>jacky</option>
		        <option>rose</option>
		    </select>
		</div>
		<!-- 复制。鼠标右键复制和快捷键Ctrl+C都会触发。 -->
		<div ng-controller="myCtrl5">
		    <input type="text" ng-copy="copy()" value="复制"/>
		    <textarea cols="30" rows="10" ng-copy="copy()">复制</textarea>
		</div>
		<!-- 剪切。鼠标右键剪切和快捷键Ctrl+X都会触发。 -->
		<div ng-controller="myCtrl6">
		    <input type="text" ng-cut="cut()" value="剪切"/>
		    <textarea cols="30" rows="10" ng-cut="cut()">剪切</textarea>
		</div>
		<!-- 粘贴。鼠标右键粘贴和快捷键Ctrl+V都会触发 -->
		<div ng-controller="myCtrl7">
		    <input type="text" ng-paste="paste()" value="粘贴"/>
		    <textarea cols="30" rows="10" ng-paste="paste()">粘贴</textarea>
		</div>
		<!-- 键盘按键按下 -->
		<div ng-controller="myCtrl8">
		    <input type="text" ng-keydown="keydown($event)" value="键盘按键按下"/>
		    <textarea cols="30" rows="10" ng-keydown="keydown($event)">键盘按键按下</textarea>
		</div>
		<!-- 键盘按键按下并松开 -->
		<div ng-controller="myCtrl9">
		    <input type="text" ng-keyup="keyup($event)" value="键盘按键按下并松开"/>
		    <textarea cols="30" rows="10" ng-keyup="keyup($event)">键盘按键按下并松开</textarea>
		</div>
		<!-- 键盘按键按下 -->
		<div ng-controller="myCtrl10">
		    <input type="text" ng-keypress="keypress($event)" value="键盘按键按下"/>
		    <textarea cols="30" rows="10" ng-keypress="keypress($event)">键盘按键按下</textarea>
		</div>
		<!-- 鼠标按下，左右中间按下都会触发 -->
		<div ng-controller="myCtrl11">
		    <button ng-mousedown="mousedown($event)">鼠标按下</button>
		</div>
		<!-- 鼠标按下弹起，左右中间按下弹起都会触发 -->
		<div ng-controller="myCtrl12">
		    <button ng-mouseup="mouseup($event)">鼠标按下弹起</button>
		</div>
		<!-- 鼠标进入 -->
		<div ng-controller="myCtrl13">
		    <button ng-mouseenter="mouseenter()">鼠标进入</button>
		</div>
		<!-- 鼠标离开 -->
		<div ng-controller="myCtrl14">
		    <button ng-mouseleave="mouseleave()">鼠标离开</button>
		</div>
		<!-- 鼠标移动 -->
		<div ng-controller="myCtrl15">
		    <button ng-mousemove="mousemove()">鼠标移动</button>
		</div>
		<!-- 鼠标进入 -->
		<div ng-controller="myCtrl16">
		    <button ng-mouseover="mousemove()">鼠标进入</button>
		</div>
	</body>
	<script type="text/javascript">
		var app = angular.module("myApp", []);
		app.controller('myCtrl1', function($scope) {
			$scope.click = function() {
				 console.log('click');
			}
		}).controller('myCtrl2', function ($scope) {
            $scope.dblclick = function () {
                 console.log('click');
            }
        }).controller('myCtrl3', function ($scope) {
            $scope.blur = function () {
                 console.log('blur');
            }
        }).controller('myCtrl4', function ($scope) {
            $scope.focus= function () {
                 console.log('focus');
            }
        }).controller('myCtrl5', function ($scope) {
            $scope.copy = function () {
                console.log('copy');
            }
        }).controller('myCtrl6', function ($scope) {
            $scope.cut = function () {
                console.log('cut');
            }
        }).controller('myCtrl7', function ($scope) {
            $scope.paste = function () {
                console.log('paste');
            }
        }).controller('myCtrl8', function ($scope) {
            $scope.keydown = function ($event) {
                console.log($event.keyCode);
            }
        }).controller('myCtrl9', function ($scope) {
            $scope.keyup = function ($event) {
                console.log($event.keyCode);
            }
        }).controller('myCtrl10', function ($scope) {
            $scope.keypress = function ($event) {
                console.log($event.keyCode);
            }
        }).controller('myCtrl11', function ($scope) {
            $scope.mousedown = function ($event) {
                console.log($event.which);
            }
        }).controller('myCtrl12', function ($scope) {
            $scope.mouseup = function ($event) {
                 console.log($event.which);
            }
        }).controller('myCtrl13', function ($scope) {
            $scope.mouseenter = function () {
                 console.log('mouseenter');
            }
        }).controller('myCtrl14', function ($scope) {
            $scope.mouseleave = function () {
                 console.log('mouseleave');
            }
        }).controller('myCtrl15', function ($scope) {
            $scope.mousemove = function () {
                 console.log('mousemove');
            }
        }).controller('myCtrl16', function ($scope) {
            $scope.mousemove = function () {
                 console.log('mousemove');
            }
        });
	</script>
</html>

万德佛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS事件指令（个人笔记）

温馨提示:(1)记得引入angular.min.js(2)按F12打开控制台,选择console，可以查看事件起到作用且成功打印<!DOCTYPE html><html ng-app="myApp"> <head> <meta charset="utf-8"> <title></title> <script src="js/angular.min.js" type="text/javascript".
复制链接

扫一扫