AngularJs 键盘事件和鼠标事件

最新推荐文章于 2021-04-12 06:20:56 发布

转载最新推荐文章于 2021-04-12 06:20:56 发布 · 123 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chengqiaoli/p/6780187.html

本文详细介绍了AngularJS中常用的事件指令，包括键盘事件（如ngKeydown、ngKeypress、ngKeyup）和鼠标事件（如ngMousedown、ngMouseenter、ngMouseleave等）。通过具体的使用案例，帮助读者理解如何在实际开发中应用这些指令。

ngKeydown/ngKeypress/ngKeyup

该指令在按键按下/按键按下/按键松开时执行指定表达式。

ngKeydown和ngKeypress略有不同，目前的测试是ngKeypress针对系统按键是无效的，而ngKeydown可以。

ngKeyup指令在按键松开的时候执行。

使用代码：

  <input ng-keydown="count = count + 1" ng-init="count=0">{{count}}
  <input ng-keypress="count = count + 1" ng-init="count=0">{{count}}
  <input ng-keyup="count = count + 1" ng-init="count=0">{{count}}

ngMousedown/ngMouseenter/ngMouseleave/ngMousemove/ngMouseover/ngMouseup

该指令在鼠标按下/鼠标进入/鼠标离开/鼠标移动/鼠标在上面/鼠标松开时执行指定表达式。

使用代码：

  <button ng-mousedown="count = count + 1" ng-init="count=0">on mouse down</button>{{count}}
  <button ng-mouseenter="count = count + 1" ng-init="count=0">when mouse enter</button>{{count}}
  <button ng-mouseleave="count = count + 1" ng-init="count=0">when mouse leave</button>{{count}}
  <button ng-mousemove="count = count + 1" ng-init="count=0">when mouse move</button>{{count}}
  <button ng-mouseover="count = count + 1" ng-init="count=0">when mouse is over</button>{{count}}
  <button ng-mouseup="count = count + 1" ng-init="count=0">on mouse up</button>{{count}}

转载于:https://www.cnblogs.com/chengqiaoli/p/6780187.html