AngularJS Events

AngularJS Events का उपयोग user actions जैसे click, change, keypress, focus आदि को handle करने के लिए किया जाता है। AngularJS में events को handle करने के लिए direct JavaScript event listeners लगाने की जरूरत नहीं होती, बल्कि built-in event directives का उपयोग किया जाता है।

AngularJS events automatically digest cycle के अंदर काम करते हैं, जिससे model और view हमेशा sync में रहते हैं।

AngularJS Event Handling Concept

AngularJS में:

• Events directives के रूप में होते हैं
• Event होने पर controller function call होता है
• Model update होते ही view automatically update हो जाती है

ng-click Event

ng-click सबसे ज्यादा use होने वाला AngularJS event directive है।

<div ng-app="myApp" ng-controller="eventCtrl">
  <button ng-click="increase()">Click Me</button>
  <p>Count: {{count}}</p>
</div>

app.controller("eventCtrl", function($scope) {
  $scope.count = 0;

  $scope.increase = function() {
    $scope.count++;
  };
});

Code Explanation

• Button click होने पर increase() function call होता है
• Function count value को increment करता है
• Data binding की वजह से view तुरंत update होती है

ng-dblclick Event

Double click event handle करने के लिए use होता है।

<p ng-dblclick="message='Double Clicked!'">
  Double click here
</p>
<p>{{message}}</p>

Code Explanation

• Double click पर expression execute होती है
• message scope variable update होता है
• Extra JavaScript की जरूरत नहीं होती

ng-change Event

Input value change होने पर event trigger होता है।

<input type="text" ng-model="name" ng-change="showName()">
<p>{{result}}</p>

$scope.showName = function() {
  $scope.result = "Hello " + $scope.name;
};

Code Explanation

• Input change होते ही showName() call होता है
• Function updated value use करता है
• Live feedback forms में useful है

ng-keyup Event

Keyboard key छोड़ने पर event trigger होता है।

<input type="text" ng-keyup="countKeys()">
<p>Key pressed {{keys}} times</p>

$scope.keys = 0;
$scope.countKeys = function() {
  $scope.keys++;
};

Code Explanation

• हर keyup पर function execute होता है
• Keyboard interaction track किया जा सकता है

ng-keydown और ng-keypress

<input type="text" ng-keydown="onDown()" ng-keypress="onPress()">

Code Explanation

• ng-keydown key press होते ही trigger होता है
• ng-keypress printable characters के लिए use होता है
• Advanced keyboard handling में helpful है

ng-mouse Events

AngularJS mouse related events भी provide करता है।

<div ng-mouseenter="enter()"
     ng-mouseleave="leave()">
  Hover Me
</div>
<p>{{status}}</p>

$scope.enter = function() {
  $scope.status = "Mouse Entered";
};

$scope.leave = function() {
  $scope.status = "Mouse Left";
};

Code Explanation

• Mouse enter और leave events detect होते हैं
• UI interaction improve करने में useful है

ng-submit Event

Form submit handle करने के लिए ng-submit use किया जाता है।

<form ng-submit="save()">
  <input type="text" ng-model="username">
  <button type="submit">Save</button>
</form>

$scope.save = function() {
  $scope.message = "Form Submitted";
};

Code Explanation

• Submit होने पर page reload नहीं होता
• AngularJS function execute होता है
• Forms के लिए recommended approach है

ng-focus और ng-blur Events

<input ng-focus="onFocus()" ng-blur="onBlur()">
<p>{{info}}</p>

Code Explanation

• Focus मिलने पर onFocus() call होता है
• Focus हटने पर onBlur() call होता है
• Validation और UX में useful है

Event Object का उपयोग ($event)

AngularJS event object को $event के जरिए access करने देता है।

<button ng-click="showEvent($event)">Click</button>

$scope.showEvent = function(event) {
  $scope.info = event.type;
};

Code Explanation

• $event original DOM event होता है
• Event type, target जैसी details मिलती हैं
• Advanced event handling संभव होती है

Event Propagation रोकना

<div ng-click="parentClick()">
  <button ng-click="childClick($event)">Click</button>
</div>

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

Code Explanation

• stopPropagation() parent event trigger होने से रोकता है
• Nested elements में useful है

AngularJS Events Best Practices

• Events में heavy logic न रखें
• Business logic controller या service में रखें
• ng-submit को form के लिए prefer करें
• Direct DOM event listeners avoid करें

Common Event Mistakes

• Inline complex expressions लिखना
• Controller में DOM manipulation करना
• $event को ignore करना जब जरूरत हो
• Unnecessary watchers create करना

Summary

इस chapter में आपने सीखा:

• AngularJS event handling का concept
• Common event directives जैसे ng-click, ng-change
• Keyboard और mouse events
• $event object का उपयोग
• Event best practices और common mistakes