❮ 上一节
下一节 ❯
AngularJS HTML 事件
AngularJS 有自己的 HTML 事件指令。
AngularJS 事件
您可以使用以下一个或多个指令将 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 事件，两个事件都将执行。
鼠标事件
鼠标事件在光标移动到元素上时发生，顺序如下:
ng-mouseover
ng-mouseenter
ng-mousemove
ng-mouseleave
或者在元素上单击鼠标按钮时，按以下顺序:
ng-mousedown
ng-mouseup
ng-click
您可以在任何 HTML 元素上添加鼠标事件。
实例
当鼠标移动到 H1 元素上时，增加计数变量:
Mouse over me!
{{ count }}
亲自试一试 »
ng-click 指令
ng-click 指令定义了 AngularJS 点击事件。
实例
{{ count }}
亲自试一试 »
您还可以参考一个函数:
实例
{{ count }}
亲自试一试 »
切换, True/False
如果要在单击按钮时显示一段 HTML 代码，并在再次单击按钮时隐藏，如下拉菜单，请使按钮的行为类似于切换开关:
Click Me
Menu:
Pizza
Pasta
Pesce
实例
Menu:
亲自试一试 »
showMe 变量以布尔值 false 开始。
myFunc 函数通过使用 !（非）运算符。
$event 对象
调用函数时，可以将 $event对象作为参数传递。
$event 对象包含浏览器的事件对象:
实例
Mouse
Over Me!
Coordinates: {{x + ', ' + y}}
亲自试一试 »
❮ 上一节
下一节 ❯