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-内置事件指令及其他的更多相关文章

  1. python自动化测试学习笔记-4内置函数,处理json

    函数.全局变量 写代码时注意的几点事项: 1.一般写代码的时候尽量少用或不用全局变量,首先全局变量不安全,大家协作的情况下,代码公用容易被篡改,其次全局变量会一直占用系统内容. 2.函数里如果有多个r ...

  2. 学习笔记——Maven 内置变量

    Maven内置变量说明: ${basedir} 项目根目录(即pom.xml文件所在目录) ${project.build.directory} 构建目录,缺省为target目录 ${project. ...

  3. Python学习笔记-Day3-python内置函数

    python内置函数 1.abs    求绝对值 2.all 判断迭代器中的所有数据是否都为true 如果可迭代的数据的所有数据都为true或可迭代的数据为空,返回True.否则返回False 3.a ...

  4. 【学习】js学习笔记:内置顶层函数eval()的兼容用法

    今天学了一个内置顶层函数,eval();其作用是将字符串转换成javascript命令执行,但必须符合语法,否则会报错. 如果写成window.eval(),则其定义的变量会在全局生效. 但是,在IE ...

  5. java web 学习笔记 jsp内置对象

    jsp2 表达式语言的内置对象 使用方式${object.attributename} 或者${object["attributename"]} pageContext pageS ...

  6. Python学习笔记-常用内置函数

    输出:print() 功能:输出打印 语法:print(*objects, sep=' ', end='\n', file=sys.stdout) 参数:objects----复数,表示可以一次输出多 ...

  7. [Python学习笔记-001] 内置函数getattr()

    如果某个实例foo有多个方法, 当对foo的每一个方法我们都需要使用try ... except ...进行包装的时候,内置函数getattr()可以用来精简代码. 1. getattr()的用法 # ...

  8. python学习笔记011——内置函数pow()

    1 语法 pow(x, y[, z]) x -- 数值表达式. y -- 数值表达式. z -- 数值表达式. 函数是计算 x 的 y 次方,如果 z 在存在,则再对结果进行取模,其结果等效于pow( ...

  9. Python学习笔记011——内置函数exec()

    1 描述 把一个字符串当成语句执行 exec()  执行储存在字符串或文件中的 Python 语句,相比于  eval() , exec() 可以执行更复杂的 Python 代码. exec函数和ev ...

  10. shell 学习笔记4-shell内置变量命令

    一.shell 的一些内置命令 常用的一内部命令有:echo.eval.exec.export.read.shift 1.echo命令-在屏幕中输出信息 1)说明 格式:echo args #< ...

随机推荐

  1. RDLC系列(一)ASP.NET RDLC 报表自定义数据源

    最近一段时间开发ERP系统中要用到不少报表打印,在网上找了一圈发现想些好用的报表控件大部分要收费,一些面免费要么不好用要么IE8不兼容,最后还是用了微软自带的RDLC报表,把自己遇到的坑和技巧整理分享 ...

  2. Docker入门01——Image

    1.获取镜像 2.列出镜像 3.创建镜像 3.1 修改已有镜像 3.2 使用Dockerfile创建镜像 创建Dickerfile文件 使用build来创建镜像 使用新创建的镜像来启动容器 4.移除镜 ...

  3. 深入探讨 CSS 特性检测 @supports 与 Modernizr

    什么是 CSS 特性检测?我们知道,前端技术日新月异的今天,各种新技术新属性层出不穷.在 CSS 层面亦不例外. 一些新属性能极大提升用户体验以及减少工程师的工作量,并且在当下的前端氛围下: 很多实验 ...

  4. 配置apache

    1. 修改httpd.conf文件 # vi  /usr/local/apache/conf/httpd.conf 1) 设置根目录的路径 根目录是指Apache存放配置文件和日志文件的目录,配置参数 ...

  5. javascript string对象方法总结

    1.anchor() 用于创建html锚,也就是a标签,()中可以带参数,是a标签的name属性值. var string="hello world"; document.writ ...

  6. Hibernate框架双向多对多关联映射关系

    建立双向多对多关联关系    Project.java (项目表)                private Integer proid;                private Strin ...

  7. [微信小程序-开发工具]快捷键

    1.进入快捷键  >  > 2.快捷键 1.元素面板 ↑↓:导航元素 →←:展开/折叠 Enter:编辑属性 H:隐藏元素 F2:切换编辑HTML 2.样式窗口 Tab/Shift + T ...

  8. 转:js中cookie的使用详细分析

    cookie机制将信息存储于用户硬盘,因此可以作为全局变量,这是它最大的一个优点.它可以用于以下几种场合. (1)保存用户登录状态.例如将用户id存储于一个cookie内,这样当用户下次访问该页面时就 ...

  9. TP框架数据库操作(增删改)

    首先选择一张表,对其进行操作: 对数据库操作之前首先要创建模型: $n = M("account"); 数据库添加数据: 1.使用数组: 1.使用数组 $arr = array(& ...

  10. C++ protected访问权限思考

    看了云风关于protected的思考,自己也总结了下. C++的访问权限有三个 private.protected.public. 如果不包括继承的话,比较好理解,可以分为类外和类内两部分.类外不能访 ...