angularJS的$event事件

发布时间：2020-12-17 08:57:46 所属栏目：安全来源：网络整理

导读：angular支持6种event事件，分别是： 1、ng-mousedown 2、ng-mouseup 3、ng-mouseenter 4、ng-mouseleave 5、ng-mousemove 6、ng-mouSEOver传值变量是$event,方式为：onMouseDown($event) 以下是一个完整的演示实例： HTML： !DOCTYPE htmlhtmlhead script sr

angular支持6种event事件，分别是：

1、ng-mousedown
         2、ng-mouseup
         3、ng-mouseenter
         4、ng-mouseleave
         5、ng-mousemove
         6、ng-mouSEOver
传值变量是$event,方式为：onMouseDown($event)

以下是一个完整的演示实例：

HTML：

<!DOCTYPE html>
<html>
<head>
  <script src="angular.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="mainModule">
  <div ng-controller="mainController">
    <h3>1. Click</h3>
    <button id="firstBtn" ng-click="onFirstBtnClick()">Click me</button>
    <strong>RESULT:</strong> {{onFirstBtnClickResult}}<br />
    <br />
    <h3>2. Click with Dependency Injection</h3>
    <label>Type something: <input type="text" ng-model="secondBtnInput"></label>
    <button id="secondBtn" ng-click="onSecondBtnClick(secondBtnInput)">Click me</button><br />
    <strong>RESULT:</strong> {{onSecondBtnClickResult}}<br />
    <br />
    <h3>3. Double click</h3>
    Double-click the square<br />
    <img src="images/square.png" ng-dblclick="onDblClick()" /><br />
    <strong>RESULT:</strong> {{onDblClickResult}}<br />
    <h3>4. Mouse down,up,enter,leave,move,over</h3>
    Move the mouse on the square<br />
    <img src="images/square.png"
         ng-mousedown="onMouseDown($event)"
         ng-mouseup="onMouseUp($event)"
         ng-mouseenter="onMouseEnter($event)"
         ng-mouseleave="onMouseLeave($event)"
         ng-mousemove="onMouseMove($event)"
         ng-mouSEOver="onMouSEOver($event)" /><br />
    <strong>MOUSE DOWN RESULT:</strong> {{onMouseDownResult}}<br />
    <strong>MOUSE UP RESULT:</strong> {{onMouseUpResult}}<br />
    <strong>MOUSE ENTER RESULT:</strong> {{onMouseEnterResult}}<br />
    <strong>MOUSE LEAVE RESULT:</strong> {{onMouseLeaveResult}}<br />
    <strong>MOUSE MOVE RESULT:</strong> {{onMouseMoveResult}}<br />
    <strong>MOUSE OVER RESULT:</strong> {{onMouSEOverResult}}
  </div>
</body>
</html>

JS：

angular.module("mainModule",[])
  .controller("mainController",function ($scope)
  {
    // Initialization
    $scope.onFirstBtnClickResult = "";
    $scope.secondBtnInput = "";
    $scope.onDblClickResult = "";
    $scope.onMouseDownResult = "";
    $scope.onMouseUpResult = "";
    $scope.onMouseEnterResult = "";
    $scope.onMouseLeaveResult = "";
    $scope.onMouseMoveResult = "";
    $scope.onMouSEOverResult = "";

    // Utility functions

    // Accepts a MouseEvent as input and returns the x and y
    // coordinates relative to the target element.
    var getCrossBrowserElementCoords = function (mouseEvent)
    {
      var result = {
        x: 0,y: 0
      };

      if (!mouseEvent)
      {
        mouseEvent = window.event;
      }

      if (mouseEvent.pageX || mouseEvent.pageY)
      {
        result.x = mouseEvent.pageX;
        result.y = mouseEvent.pageY;
      }
      else if (mouseEvent.clientX || mouseEvent.clientY)
      {
        result.x = mouseEvent.clientX + document.body.scrollLeft +
          document.documentElement.scrollLeft;
        result.y = mouseEvent.clientY + document.body.scrollTop +
          document.documentElement.scrollTop;
      }

      if (mouseEvent.target)
      {
        var offEl = mouseEvent.target;
        var offX = 0;
        var offY = 0;

        if (typeof(offEl.offsetParent) != "undefined")
        {
          while (offEl)
          {
            offX += offEl.offsetLeft;
            offY += offEl.offsetTop;

            offEl = offEl.offsetParent;
          }
        }
        else
        {
          offX = offEl.x;
          offY = offEl.y;
        }

        result.x -= offX;
        result.y -= offY;
      }

      return result;
    };

    var getMouseEventResult = function (mouseEvent,mouseEventDesc)
    {
      var coords = getCrossBrowserElementCoords(mouseEvent);
      return mouseEventDesc + " at (" + coords.x + "," + coords.y + ")";
    };

    // Event handlers
    $scope.onFirstBtnClick = function () {
      $scope.onFirstBtnClickResult = "CLICKED";
    };

    $scope.onSecondBtnClick = function (value) {
      $scope.onSecondBtnClickResult = "you typed '" + value + "'";
    };

    $scope.onDblClick = function () {
      $scope.onDblClickResult = "DOUBLE-CLICKED";
    };

    $scope.onMouseDown = function ($event) {
      $scope.onMouseDownResult = getMouseEventResult($event,"Mouse down");
    };

    $scope.onMouseUp = function ($event) {
      $scope.onMouseUpResult = getMouseEventResult($event,"Mouse up");
    };

    $scope.onMouseEnter = function ($event) {
      $scope.onMouseEnterResult = getMouseEventResult($event,"Mouse enter");
    };

    $scope.onMouseLeave = function ($event) {
      $scope.onMouseLeaveResult = getMouseEventResult($event,"Mouse leave");
    };

    $scope.onMouseMove = function ($event) {
      $scope.onMouseMoveResult = getMouseEventResult($event,"Mouse move");
    };

    $scope.onMouSEOver = function ($event) {
      $scope.onMouSEOverResult = getMouseEventResult($event,"Mouse over");
    };
  });

效果演示：

http://www.angularjshub.com/examples/eventhandlers/mouseevents/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!