AngularJS 事件



  • 事件指令

    AngularJS 有其自己的HTML事件指令。
    您可以使用以下一个或多个指令将 AngularJS 事件侦听器添加到HTML元素:
    • ng-blur
    • ng-change
    • ng-click
    • ng-copy
    • ng-cut
    • ng-dblclick
    • ng-focus
    • ng-keydown
    • ng-keypress
    • ng-keyup
    • ng-mousedown
    • ng-mouseenter
    • ng-mouseleave
    • ng-mousemove
    • ng-mouseover
    • ng-mouseup
    • ng-paste
    事件指令允许我们在某些用户事件上运行 AngularJS 函数。
    AngularJS 事件不会覆盖HTML事件,两个事件都将被执行。
  • Mouse 事件

    当光标按以下顺序移动到元素上时,发生鼠标事件:
    1. ng-mouseover
    2. ng-mouseenter
    3. ng-mousemove
    4. ng-mouseleave
    或在元素上单击鼠标按钮时,按此顺序:
    1. ng-mousedown
    2. ng-mouseup
    3. ng-click
    您可以在任何HTML元素上添加鼠标(mouse)事件。
    下面示例演示了当鼠标移到H1元素上时,增加count变量:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>蝴蝶教程(jc2182.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
            <h1 ng-mousemove="count = count + 1">鼠标指向到了我</h1>
            <h2>{{ count }}</h2>
        </div> 
        <script>
           var app = angular.module('myApp', []);
               app.controller('myCtrl', function($scope) {
               $scope.count = 0;
           });
        </script>
    </body>
    </html>
    
  • ng-click 指令

    ng-click 指令定义了单击元素时将执行的AngularJS代码。
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>蝴蝶教程(jc2182.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
           <button ng-click="count = count + 1">点击我+1</button>
           <p>{{ count }}</p>
        </div> 
        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
                $scope.count = 0;
            });
        </script>
    </body>
    </html>
    
    您还可以引用一个函数:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>蝴蝶教程(jc2182.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
            <button ng-click="myFunction()">点击我+1</button>
            <p>{{ count }}</p>
        </div> 
        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
                $scope.count = 0;
                $scope.myFunction = function() {
                    $scope.count++;
                }
            });
        </script>
    </body>
    </html>
    
  • Toggle, True/False

    如果要在单击按钮时显示一部分HTML代码,并在再次单击按钮时隐藏(如下拉菜单),则使按钮的行为类似于切换开关:

    菜单导航:

    Pizza
    Pasta
    Pesce
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>蝴蝶教程(jc2182.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
           <button ng-click="myFunc()">点击我切换显示/隐藏菜单</button>
            <div ng-show="showMe">
                 <h1>菜单导航:</h1>
                 <div>Pizza </div>
                 <div>Pasta </div>
                 <div>Pesce </div>
             </div>
        </div> 
        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
                $scope.showMe = false;
                $scope.myFunc = function() {
                    $scope.showMe = !$scope.showMe;
                }
            });
        </script>
    </body>
    </html>
    
    showMe 变量以布尔值false开始。
    myFunc 函数通过使用!将 showMe 变量设置为与它相反的值。!(不是)运算符。
  • $event 对象

    您可以在调用函数时将 $event 对象作为参数传递。
    下面示例演示了 $event 对象包含浏览器的事件对象:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>蝴蝶教程(jc2182.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">
            <h1 ng-mousemove="myFunc($event)">将鼠标悬停在我身上!</h1>
            <p>坐标: {{x + ', ' + y}}</p>
        </div> 
        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
                $scope.myFunc = function(myE) {
                    $scope.x = myE.clientX;
                    $scope.y = myE.clientY;
                }
            });
        </script>
    </body>
    </html>