AngularJS |大事记

可以使用下面提到的指令添加AngularJS中的事件：

• ng-mousemove：鼠标移动导致事件的执行。
• ng-mouseup：鼠标向上移动将导致事件的执行。
• ng-mousedown：鼠标向下移动会导致事件的执行。
• ng-mouseenter：单击鼠标按钮将导致事件的执行。
• ng-mouseover：鼠标悬停会导致事件的执行。
• ng-cut：剪切操作导致事件的执行。
• ng-copy：复制操作导致事件的执行。
• ng-keypress：按键会导致事件的执行。
• ng-keyup：按下向上箭头键会导致事件的执行。
• ng-keydown：按下向下箭头键会导致事件的执行。
• ng-click：单击可导致事件的执行。
• ng-dblclick：双击可导致事件的执行。

示例1：显示任何鼠标移动事件发生时的动作。这包括拖动鼠标以导致光标在屏幕上移动的事件。

  

    
    

  

    
        Move the mouse over GeeksforGeeks
        to increase the Total Count.
    
  
    
  
        
            Geeks for Geeks
        
  
        Total Count:
        {{ count }}
    
  
    
        var app = angular.module('App1', []);
        app.controller('Ctrl1', function ($scope) {
            $scope.count = 0;
        });
    

  

输出：

示例2：此示例显示了用于在Mouse Movement Event上调用函数的$ event obj。在这里，$ event对象使发生鼠标移动事件。

  

    
    

  

    
        Mouse over Geeks for Geeks to display
        the value of clientX and clientY.
    
    
  
        
            Geeks for Geeks
        
  
        Coordinates: {{x + ', ' + y}}
    
  
    
        var app = angular.module('App1', []);
        app.controller('Ctrl1', function ($scope) {
            $scope.myFunc = function (gfg) {
                $scope.x = gfg.clientX;
                $scope.y = gfg.clientY;
            }
        });
    

  

输出：

示例3：此示例显示了针对“单击事件”执行的操作。在这里，单击鼠标按钮将导致执行某些操作。

  

    
    

  

    
        Click on GeeksforGeeks to
        increase the Total Count.
    
  
    
  
        
            Geeks for Geeks
        
          
        Total Count:
        {{ count }}
    
  
    
        var app = angular.module('App1', []);
        app.controller('Ctrl1', function ($scope) {
            $scope.count = 0;
        });
    

  

输出：