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. 通过oledb驱动读取excel、csv数据丢失解决方案

    1.问题出现 在开发应用程序的过程中,比较常用一功能就是通过oledb驱动读取excel.csv.text等文件:而最近有客户反映,在使用短信平台(下载地址:http://www.sms1086.co ...

  2. BZOJ 3404: [Usaco2009 Open]Cow Digit Game又见数字游戏（博弈论）

    一开始被题意坑了= =，题目是说这个数字的最大和最小，不是个位的最大和最小= = 不知道怎么做只能递推了，必胜态就是存在能到达必败态的，必败态就是只能到达必胜态的 CODE: #include< ...

  3. javaweb 打包为安卓apk（1）-Hbuilder

    需求:当前已经完成java web项目开发,java web项目前端使用自适应框架(bootstrap),想使用最简单方式生成一个安卓apk,无需进行安卓开发(类似于手机浏览器访问一样) 要求:项目已 ...

  4. WebSocket浅析(一)：实现群聊功能

    首先WebSocket打破了传统的web请求响应模式,实现管道式的实时通信,并且可以持续连接. 相对于传统 HTTP 每次请求-应答都需要客户端与服务端建立连接的模式,WebSocket 是类似 So ...

  5. 点击Robot Framework的桌面快捷图标后，没有反应（没有打开应用程序）

    http://www.cnblogs.com/zhengyihan1216/p/6397478.html  这篇文章中介绍了如何安装Robot Framework以及如何在桌面上创建快捷方式. 但是有 ...

  6. SpringMvc的运行流程

    一.先用文字描述 1.用户发送请求到DispatchServlet 2.DispatchServlet根据请求路径查询具体的Handler 3.HandlerMapping返回一个HandlerExc ...

  7. C#基础 运算符

    运算符分为5类-- 1.算数运算符[加加(++)   减减(--)  加(+)  减(-)  乘(*)  除(/)  取余(%)] (1)前++和后++的区别 using System; using ...

  8. Android SDK教程

    Android SDK 网络问题解析 Android 客户端网络不稳定,会导致App 有时候无法及时收到 Push 消息. 很多开发者认为这是因为 JPush 推送不稳定.延迟,甚至有时候认为 JPu ...

  9. 翻译：使用 Redux 和 ngrx 创建更佳的 Angular 2

    翻译:使用 Redux 和 ngrx 创建更佳的 Angular 2 原文地址:http://onehungrymind.com/build-better-angular-2-application- ...

  10. iOS 图片裁剪 + 旋转

    iOS 图片裁剪 + 旋转 之前分别介绍了图片裁剪和图片旋转方法 <iOS 图片裁剪方法> 地址:http://www.cnblogs.com/silence-cnblogs/p/6490 ...