AngularJS1.X学习笔记4-内置事件指令及其他

最新推荐文章于 2020-12-24 18:01:46 发布

weixin_30828379

最新推荐文章于 2020-12-24 18:01:46 发布

阅读量104

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/floor/p/6654272.html

版权

　　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:允许为不同大小和像素密度而指定多个图片　　

　　好了，今天就到这吧！愚人节已经到了，祝大家节日快乐！早上起来以后记得多长点心眼，小心被耍！

转载于:https://www.cnblogs.com/floor/p/6654272.html

weixin_30828379

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS1.X学习笔记4-内置事件指令及其他

　　AngularJS为我们定义了一系列事件指令，方便我们对用户的操作作出响应。甚至他还有一个可选模块提供了触摸事件和手势事件的支持，为移动端开发提供了可能。现在开始学习一下AngularJS的事件指令。一、事件指令　　先盗张图，这个图展示了AngularJS中定义的事件指令，下面来做一些测试。　　指令作用描述ng-blur属性、类对bl...
复制链接

扫一扫