AngularJS1.X学习笔记4-内置事件指令及其他
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>event</title>
<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>event</title>
<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>event</title>
<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:允许为不同大小和像素密度而指定多个图片
好了，今天就到这吧！愚人节已经到了，祝大家节日快乐！早上起来以后记得多长点心眼，小心被耍！
AngularJS1.X学习笔记4-内置事件指令及其他的更多相关文章
- python自动化测试学习笔记-4内置函数，处理json
函数.全局变量 写代码时注意的几点事项: 1.一般写代码的时候尽量少用或不用全局变量,首先全局变量不安全,大家协作的情况下,代码公用容易被篡改,其次全局变量会一直占用系统内容. 2.函数里如果有多个r ...
- 学习笔记——Maven 内置变量
Maven内置变量说明: ${basedir} 项目根目录(即pom.xml文件所在目录) ${project.build.directory} 构建目录,缺省为target目录 ${project. ...
- Python学习笔记-Day3-python内置函数
python内置函数 1.abs 求绝对值 2.all 判断迭代器中的所有数据是否都为true 如果可迭代的数据的所有数据都为true或可迭代的数据为空,返回True.否则返回False 3.a ...
- 【学习】js学习笔记：内置顶层函数eval()的兼容用法
今天学了一个内置顶层函数,eval();其作用是将字符串转换成javascript命令执行,但必须符合语法,否则会报错. 如果写成window.eval(),则其定义的变量会在全局生效. 但是,在IE ...
- java web 学习笔记 jsp内置对象
jsp2 表达式语言的内置对象 使用方式${object.attributename} 或者${object["attributename"]} pageContext pageS ...
- Python学习笔记-常用内置函数
输出:print() 功能:输出打印 语法:print(*objects, sep=' ', end='\n', file=sys.stdout) 参数:objects----复数,表示可以一次输出多 ...
- [Python学习笔记-001] 内置函数getattr()
如果某个实例foo有多个方法, 当对foo的每一个方法我们都需要使用try ... except ...进行包装的时候,内置函数getattr()可以用来精简代码. 1. getattr()的用法 # ...
- python学习笔记011——内置函数pow()
1 语法 pow(x, y[, z]) x -- 数值表达式. y -- 数值表达式. z -- 数值表达式. 函数是计算 x 的 y 次方,如果 z 在存在,则再对结果进行取模,其结果等效于pow( ...
- Python学习笔记011——内置函数exec()
1 描述 把一个字符串当成语句执行 exec() 执行储存在字符串或文件中的 Python 语句,相比于 eval() , exec() 可以执行更复杂的 Python 代码. exec函数和ev ...
- shell 学习笔记4-shell内置变量命令
一.shell 的一些内置命令 常用的一内部命令有:echo.eval.exec.export.read.shift 1.echo命令-在屏幕中输出信息 1)说明 格式:echo args #< ...
随机推荐
- 纪中集训 Day 4
今天（其实是昨天）不考试= = 所以就刷题了 = = 早上无所事事，想把几道题刷过却很不爽的全删了 下午觉得不能这样了，把BZOJ 过了两道水的DP (计算几何根本不会啊QAQ) 晚上先水了一题之后， ...
- 使用git恢复未提交的误删数据
不小心将项目中一个文件夹删除还未提交,或者已经提交, 此时想要恢复数据该怎么办? 答案是git reflog,使用git reflog命令可以帮助恢复git误操作,进行数据恢复. 操作过程: 打开终端 ...
- 初探Lambda表达式/Java多核编程【4】Lambda变量捕获
这周开学,上了两天感觉课好多,学校现在还停水,宿舍网络也还没通,简直爆炸,感觉能静下心看书的时间越来越少了...寒假还有些看过书之后的存货,现在写一点发出来.加上假期两个月左右都过去了书才看了1/7都 ...
- java中 i = i++ 的结果
昨天看到下面这段代码,分享出来给大家看看,大家也可以讨论讨论. int i = 0; i = i++; System.out.println("i的值是 "+i); 根据我们通常所 ...
- css中的那些布局
因为最近心血来潮,就总结了一下css中的几种常见的多列布局. 两列自适应布局 两列自适应布局算是css布局里面最基础的一种布局了,不少网站在使用. 这种布局通常是左侧固定,右边自适应,当然也有反过来的 ...
- rpm的用法
rpm是由红帽公司开发的软件包管理方式,使用rpm我们可以方便的进行软件的安装.查询.卸载.升级等工作.但是rpm软件包之间的依赖性问题往往会很繁琐,尤其是软件由多个rpm包组成时. yum基於RPM ...
- 数字化工厂ERP解决方案
数字化工厂 数字化工厂建设,在现有基础上提升,实现管理层对订单进度.生产绩效.产能分析.质量管理.产品追溯和存货管理等提供业务分析报告:在控制层有可视化看板.移动客户端实现对生产状态的实时掌控,快速处 ...
- wemall app商城源码Android之Native（原生）支付模式一demo
wemall-mobile是基于WeMall的Android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享Native(原生)支付模式一demo,供技术 ...
- Repcached实现memcached复制
1.介绍 repcached是日本人开发的实现memcached复制功能,它是一个单 master单 slave的方案,但它的master/slave都是可读写的,而且可以相互同步,如果 ma ...
- iPhone 上显示桌面版页面
在用智能电话的浏览器打开页面时,很多网站会根据浏览器的屏幕大小自动调整显示布局,或跳转到移动设备使用的专用面上来优化显示.一些情况下,这种优化可能不是用户希望的,比如优化后的页面缺少桌面版的功能. 这 ...