AngularJS — Events

ng-click

<button ng-click="count = count + 1">Click me</button>
<p>Count: {{count}}</p>

<button ng-click="addItem()">Add Item</button>

ng-dblclick

<div ng-dblclick="handleDoubleClick()">Double click me</div>

ng-mouseenter/Leave

<div ng-mouseenter="highlight()" ng-mouseleave="unhighlight()">
  Hover me
</div>

ng-keydown/Up

<input ng-keydown="handleKeydown($event)">
<input ng-keyup="handleKeyup($event)">

ng-change

<input ng-model="name" ng-change="handleChange()">

Event Object

$scope.handleClick = function($event) {
  console.log('Event type:', $event.type);
  console.log('Target:', $event.target);
};

ng-submit

<form ng-submit="submitForm()">
  <input ng-model="data">
  <button type="submit">Submit</button>
</form>

Event.stopPropagation

$scope.stopPropagation = function($event) {
  $event.stopPropagation();
};

Mini Practice

1. Handle click events
2. Use keyboard events
3. Handle form submission
4. Access event object

Up Next

Continue with Forms — AngularJS forms.