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>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的)

AngularJS1.X学习笔记4-内置事件指令及其他_第1张图片AngularJS1.X学习笔记4-内置事件指令及其他_第2张图片

  从上图可以看到,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-内置事件指令及其他)