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

AngularJS 1AngularJS 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:允许为歧尺寸和像素密度使指定多只图片  

  好了,今天就算到即吧!愚人节既交了,祝大家节日快乐!早上起来之后记得多长点心眼,小心于玩!

 

相关文章