AngularJS为我们定义了一系列事件指令,方便我们对用户的操作作出响应。甚至他还有一个可选模块提供了触摸事件和手势事件的支持,为移动端开发提供了可能。现在开始学习一下AngularJS的事件指令。
一、事件指令
先盗张图,这个图展示了AngularJS中定义的事件指令,下面来做一些测试。
指令 | 作用 | 描述 |
ng-blur | 属性、类 | 对blur事件指定自定义行为,在元素失去焦点时被触发 |
ng-change | 属性、类 | 对change事件指定自定义行为,在表单元素的内容状态发生变化 时被触发(例如复选框被选中、输入框元素中的文本被修改等等) |
ng-click | 属性、类 | 为click事件指定自定义行为,在用户点击鼠标/光标时被触发 |
ng-copy ng-cut ng-paste |
属性、类 | 为copy、cut和paste事件指定自定义行为 |
ng-dbclick | 属性、类 | 为dbclick事件指定自定义行为,在用户双击鼠标/光标时被触发 |
ng-focus | 属性、类 | 为focus事件指定自定义行为,在元素获得焦点时被触发 |
ng-keydown ng-keypress ng-keyup |
属性、类 | 为keydown、keyup、keypress事件指定自定义行为, 在用户按下、释放某个案件时被触发 |
ng-mousedown ng-mouseenter ng-mouseleave ng-mousemove ng-mousemove ng-mouseover ng-mouseup |
属性、类 | 为6个标准鼠标事件(mousedown、mouseenter、mouseleave、 mousemove、mouseover和mouseup)指定自定义行为, 在用户使用鼠标、光标与元素发生交互时被触发 |
ng-submit |
属性、类 | 为submit事件指定自定义行为,在表单被提交时触发 |
DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>eventtitle>
<style type="text/css">
style>
head>
<body ng-controller="eventCtrl">
<h1 ng-click="doClick($event)" ng-mousedown="doMousedown($event)" ng-mouseup="doMouseup($event)">
点我试试看
h1>
<h1 ng-mouseleave="doMouseleave($event)" ng-mouseenter="doMouseenter($event)" ng-mouseover="doMouseover($event)">
鼠标移入移出
h1>
<div>
<input type="text" name="" ng-keydown="dokeydown($event)" ng-keyup="dokeyup($event)" ng-keypress="dokeypress($event)"
ng-focus="dofocus($event)" ng-blur="doblur($event)">
div>
<script type="text/javascript" src="../node_modules/angular/angular.min.js">script>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp.controller('eventCtrl',function($scope){
$scope.doClick = function(e){
console.log(e);
console.log("clicked!");
}
$scope.doMousedown = function(e){
console.log(e);
console.log("mousedown!");
}
$scope.doMouseup = function(e){
console.log(e);
console.log("mouseup!");
}
$scope.doMouseleave = function(e){
console.log(e);
console.log("mouseleave!");
}
$scope.doMouseenter = function(e){
console.log(e);
console.log("mouseenter!");
}
$scope.doMousemove = function(e){
console.log(e);
console.log("mousemove!");
}
$scope.doMouseover = function(e){
console.log(e);
console.log("mouseover!");
}
$scope.dokeydown = function(e){
console.log(e);
console.log("keydown!");
}
$scope.dokeyup = function(e){
console.log(e);
console.log("keyup!");
}
$scope.dokeypress = function(e){
console.log(e);
console.log("keypress!");
}
$scope.dofocus = function(e){
console.log(e);
console.log("focus!");
}
$scope.doblur = function(e){
console.log(e);
console.log("blur!");
}
})
script>
body>
html>
我们以click事件对象为例看看Angular的事件对象和普通事件对象有没有区别,代码如下:
DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>eventtitle>
<style type="text/css">
style>
head>
<body ng-controller="eventCtrl">
<h1 id="h" ng-click="doClick($event)">
点我试试看
h1>
<script type="text/javascript" src="../node_modules/angular/angular.min.js">script>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp.controller('eventCtrl',function($scope){
$scope.doClick = function(e){
console.log("from angular clicked!");
console.log(e);
}
})
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>eventtitle>
<style type="text/css">
style>
head>
<body ng-controller="eventCtrl">
<h1 id="h">
点我试试看
h1>
<script type="text/javascript">
var h = document.getElementById("h");
h.addEventListener("click",function(e){
console.log("not from Angular");
console.log(e);
});
script>
body>
html>
结果我们得到的事件对象为:(左边是普通的,右边是Angular的)
从上图可以看到,Angular并没有对事件对象做什么改装,还是原来那个事件对象,还是熟悉的味道! 基于这样的结论,可以认为处理Angular事件和处理普通事件完全一样(这个理论后来被人称作大~熊第一定律)。
一些管理属性的指令
主要有这些
ng-checked:管理checked属性
ng-disabled:管理disabled属性
ng-open:管理open属性,details上的
ng-readonly:管理readonly属性
ng-selected:管理selected属性
ng-href:为a设置href属性
ng-src:为img设置src属性
ng-srcset:允许为不同大小和像素密度而指定多个图片
好了,今天就到这吧!愚人节已经到了,祝大家节日快乐!早上起来以后记得多长点心眼,小心被耍!