Los eventos en AngularJS se pueden agregar usando las Directivas que se mencionan a continuación:
- ng-mousemove: el movimiento del mouse conduce a la ejecución del evento.
- ng-mouseup: el movimiento del mouse hacia arriba conduce a la ejecución del evento.
- ng-mousedown: el movimiento del mouse hacia abajo conduce a la ejecución del evento.
- ng-mouseenter: el clic del botón del mouse conduce a la ejecución del evento.
- ng-mouseover: el desplazamiento del mouse conduce a la ejecución del evento.
- ng-cut: la operación de corte conduce a la ejecución del evento.
- ng-copy: la operación de copia conduce a la ejecución del evento.
- ng-keypress: Presionar la tecla conduce a la ejecución del evento.
- ng-keyup: presionar la tecla de flecha hacia arriba conduce a la ejecución del evento.
- ng-keydown: presionar la tecla de flecha hacia abajo conduce a la ejecución del evento.
- ng-click: un solo clic conduce a la ejecución del evento.
- ng-dblclick: el doble clic conduce a la ejecución del evento.
Ejemplo 1: Mostrar acción ante la ocurrencia de cualquier Evento de Movimiento del Ratón. Esto incluye eventos de arrastrar el mouse para provocar el movimiento del cursor en la pantalla.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<p>
Move the mouse over GeeksforGeeks
to increase the Total Count.
</p>
<div ng-app="App1" ng-controller="Ctrl1">
<h1 ng-mousemove="count = count + 1">
Geeks for Geeks
</h1>
<h2>Total Count:</h2>
<h2>{{ count }}</h2>
</div>
<script>
var app = angular.module('App1', []);
app.controller('Ctrl1', function ($scope) {
$scope.count = 0;
});
</script>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo muestra el obj de $event para llamar a la función en el evento de movimiento del mouse. Aquí, el objeto $event permite la ocurrencia de un evento de movimiento del mouse.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<p>
Mouse over Geeks for Geeks to display
the value of clientX and clientY.
</p>
<div ng-app="App1" ng-controller="Ctrl1">
<h1 ng-mousemove="myFunc($event)">
Geeks for Geeks
</h1>
<h4>Coordinates: {{x + ', ' + y}}</h4>
</div>
<script>
var app = angular.module('App1', []);
app.controller('Ctrl1', function ($scope) {
$scope.myFunc = function (gfg) {
$scope.x = gfg.clientX;
$scope.y = gfg.clientY;
}
});
</script>
</body>
</html>
Producción:
Ejemplo 3: Este ejemplo muestra la acción que se está realizando para el evento On Click . Aquí, el clic del botón del mouse conduce a la realización de alguna acción.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<p>
Click on GeeksforGeeks to
increase the Total Count.
</p>
<div ng-app="App1" ng-controller="Ctrl1">
<button ng-click="count = count + 1">
Geeks for Geeks
</button>
<h2>Total Count:</h2>
<h2>{{ count }}</h2>
</div>
<script>
var app = angular.module('App1', []);
app.controller('Ctrl1', function ($scope) {
$scope.count = 0;
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por riarawal99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA