انگولار جی ایس ایونٹ

ਐਂਜੁਲਰਜ਼ ਆਪਣੇ ਆਪਣੇ ਐੱਚਟੀਐੱਮਐੱਲ ਈਵੈਂਟ ਇੰਡਰੈਕਸਾਂ ਨੂੰ ਰੱਖਦਾ ਹੈ。

انگولار جی ایس ایونٹ

ਤੁਸੀਂ ਹੇਠ ਲਿਖੇ ਇੱਕ ਜਾਂ ਕਈ ਇੰਡਰੈਕਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੇ ਐੱਚਟੀਐੱਮਐੱਲ ਐਲੀਮੈਂਟਾਂ 'ਤੇ ਐਂਜੁਲਰਜ਼ ਈਵੈਂਟ ਲਿਸਨਰ ਜੋੜ ਸਕਦੇ ਹੋ

• 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

ਈਵੈਂਟ ਇੰਟਰੱਕਸ਼ਨ ਕਮਾਂਡ ਸਾਡੇ ਨੂੰ ਕੁਝ ਯੂਜ਼ਰ ਈਵੈਂਟਾਂ 'ਤੇ ਐਂਜੁਲਰਜ਼ ਫੰਕਸ਼ਨਸ ਚਲਾਉਣ ਦੀ ਅਨੁਮਤੀ ਦਿੰਦੇ ਹਨ。

ਐੱਂਜੁਲਰਜ਼ ਈਵੈਂਟ ਐੱਚਟੀਐੱਮਐੱਲ ਈਵੈਂਟ ਨੂੰ ਓਵਰਰਾਇਡ ਨਹੀਂ ਕਰਦੇ, ਦੋਵੇਂ ਈਵੈਂਟ ਚਲਣਗੇ।

ਮਾਉਸ ਈਵੈਂਟ

ਜਦੋਂ ਮਾਉਸ ਐਲੀਮੈਂਟ 'ਤੇ ਹੋਵੇ ਤਾਂ ਨਿਮਨਲਿਖਤ ਕਰਨ ਵਾਲੇ ਮਾਉਸ ਈਵੈਂਟ ਹੋਣਗੇ:

• ng-mouseover
• ng-mouseenter
• ng-mousemove
• ng-mouseleave

ਜਾਂ, ਜਦੋਂ ਐਲੀਮੈਂਟ 'ਤੇ ਮਾਉਸ ਕਲਿੱਕ ਕੀਤਾ ਜਾਵੇ ਤਾਂ ਨਿਮਨਲਿਖਤ ਕਰਨ ਵਾਲੇ ਕਰਨ ਦੀ ਕਿਸਮ ਵਿੱਚ ਈਵੈਂਟ ਟ੍ਰਿਗਰ ਕੀਤੇ ਜਾਣਗੇ:

• ng-mousedown
• ng-mouseup
• ng-click

ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਐੱਚਟੀਐੱਮਐੱਲ ਐਲੀਮੈਂਟ 'ਤੇ ਮਾਉਸ ਈਵੈਂਟ ਜੋੜ ਸਕਦੇ ਹੋ:

مثال

ਜਦੋਂ ਮਾਉਸ ਐਲੀਮੈਂਟ ਉੱਤੇ ਹੋਵੇ ਤਾਂ count ਵੈਰੀਅਬਲ ਵਧਾਓ:

<div ng-app="myApp" ng-controller="myCtrl">  
<h1 ng-mousemove="count = count + 1">鼠标移到我上方！</h1>  
<h2>{{ count }}</h2>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

خود کا تجربہ کریں

ng-click ਇੰਡਰੈਕਟਿਵ

ng-click ਇੰਡਰੈਕਟਿਵ ਇੰਡਰੈਕਟਿਵ ਦੇ ਰੂਪ ਵਿੱਚ ਇਲੈਕਟ੍ਰੌਨਿਕ ਐੱਂਜੁਲਰਜ਼ ਕੋਡ ਨੂੰ ਇਸਤੇਮਾਲ ਕਰਦੇ ਹਨ ਜਦੋਂ ਇਲੈਕਟ੍ਰੌਨ ਬਦਲੇ ਹੋਏ ਹੋਣ

مثال

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

خود کا تجربہ کریں

ਤੁਸੀਂ ਇੱਕ ਫੰਕਸ਼ਨ ਦਾ ਹਵਾਲਾ ਵੀ ਲਿਆ ਸਕਦੇ ਹੋ:

مثال

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunction()">Click me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
  $scope.myFunction = function() {
    $scope.count++;
  }
});
</script>

خود کا تجربہ کریں

ਟੂਕਰਾ, ਸਚ/ਝੂਠ

ਜੇਕਰ ਤੁਸੀਂ ਬਟਨ ਨੂੰ ਕਿਉਂ ਨਾ ਇੱਕ ਟੂਕਰੇ ਬਣਾਓ ਤਾਂ ਕਿ ਤੁਸੀਂ ਇੱਕ ਹਿੱਸਾ ਐੱਚਟੀਐੱਮਐੱਲ ਕੋਡ ਨੂੰ ਦਿਖਾਓ ਅਤੇ ਫਿਰ ਬਾਰੇ ਬਟਨ ਨੂੰ ਦੁਬਾਰਾ ਕਲਿੱਕ ਕਰੋ ਤਾਂ ਮਿਲੇ ਹੋਣ, ਉਸ ਤਰ੍ਹਾਂ ਦੇ ਇੱਕ ਡਰਾਪ-ਡਾਊਨ ਮੈਨੂ ਵਾਂਗ, ਤਾਂ ਬਟਨ ਨੂੰ ਇੱਕ ਟੂਕਰੇ ਬਣਾਓ:

مثال

<div ng-app="myApp" ng-controller="myCtrl">  
<button ng-click="myFunc()">点击我！</button>  
<div ng-show="showMe">  
  <h1>菜单：</h1>  
  <div>披萨</div>  
  <div>意大利面</div>  
  <div>海鲜</div>  
</div>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.showMe = false;  
  $scope.myFunc = function() {  
    $scope.showMe = !$scope.showMe;  
  }  
});  
</script>

خود کا تجربہ کریں

showMe ਵੈਰੀਅਬਲ ਸ਼ੁਰੂ ਵਿੱਚ ਬੁਲੇਅਨ ਮੁੱਲ ਵਾਲੀ ਹੁੰਦੀ ਹੈ false。

myFunc ਫੰਕਸ਼ਨ ਨੂੰ ਇਸਤੇਮਾਲ ਕਰਕੇ !ਅਪਣੇ ਰੂਪ ਵਿੱਚ (ਨਹੀਂ) ਆਪਣੇ ਰੂਪ ਵਿੱਚ showMe ਵੈਰੀਅਬਲ ਨੂੰ ਇਸਦੀ ਮੌਜੂਦਾ ਕੀਮਤ ਦੇ ਉਲਟ ਦਾ ਮੁੱਲ ਸੈਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。

$event ਪੋਸਟ ਵਜੀਟ

ਫੰਕਸ਼ਨ ਬੁਲਾਉਣ ਨੂੰ ਇਸਤੇਮਾਲ ਕਰ ਸਕਦੇ ਹਾਂ ਕਿ $event ਪੋਸਟ ਵਜੀਟ ਦੇ ਰੂਪ ਵਿੱਚ ਪਾਸ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。

$event آئیٹم بروسر کے ایونٹ آئیٹم کا مالکیت کراتا ہے:}}

مثال

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">موس کو میرے اوپر لگائیں!</h1>
<p>کوآرڈینٹس: {{x + ', ' + y}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myFunc = function(myE) {
    $scope.x = myE.clientX;
    $scope.y = myE.clientY;
  }
});
</script>

خود کا تجربہ کریں