AngularJS Event
AngularJS has HTML events directives . Below is the list of event of AngularJS.
Below is list of event that work on Control.
Control Event
1. ng-blur
2. ng-change
3. ng-focus
4. ng-keydown
5. ng-keyup
6. ng-keypress
7. ng-copy
8. ng-cut
9. ng-paste
Below is list of event that work on Mouse.
Mouse event
1. ng-click
2. ng-dblclick
3. ng-mousedown
4. ng-mouseenter
5. ng-mouseleave
6. ng-mousemove
7. ng-mouseover
8. ng-mouseup
Below is the live example of event
1.Example 1 is of is ng-blur and ng-focus working example. When you click on the input , the color change as the ng-focus fires.When you click out of input , the color also change as ng-blur event fires.
2.Example 2 is of is ng-keydown,ng-keyup,ng-keypres working example.
When you type , each keypress mode is detected and color change accodingly.
3.Example 3 is of is ng-mouseleave ,ng-mouseover,ng-mousedown working example . When mouse move , mouse down , mouse leave over the yellow area.The event is detected and color is changed automatically.
4.Example 4 is of is ng-copy , ng-paste working example.Write a Text,then press Ctrl+C to copy , clear the area ,Ctrl+V to paste.
You will notice , that copy / paste event is detected.
$event Object
An event can be passed through a function as an argument.Below is the example , where event is passed ($event) as an argument.
Example :
Here the event is Mouse Event , the object is passed as MouseEvent object.You can get the regular properties of MouseEvent object as like javscript.Below is some of the properties.
AngularJS has HTML events directives . Below is the list of event of AngularJS.
| List of Event | ||
|---|---|---|
| ng-blur | ng-change | ng-click |
| ng-dblclick | ng-focus | ng-keydown |
| ng-keyup | ng-keypress | ng-mousedown |
| ng-mouseenter | ng-mouseleave | ng-mousemove |
| ng-mouseover | ng-mouseup | ng-copy |
| ng-cut | ng-paste | |
Below is list of event that work on Control.
Control Event
1. ng-blur
2. ng-change
3. ng-focus
4. ng-keydown
5. ng-keyup
6. ng-keypress
7. ng-copy
8. ng-cut
9. ng-paste
Below is list of event that work on Mouse.
Mouse event
1. ng-click
2. ng-dblclick
3. ng-mousedown
4. ng-mouseenter
5. ng-mouseleave
6. ng-mousemove
7. ng-mouseover
8. ng-mouseup
Below is the live example of event
1.Example 1 is of is ng-blur and ng-focus working example. When you click on the input , the color change as the ng-focus fires.When you click out of input , the color also change as ng-blur event fires.
2.Example 2 is of is ng-keydown,ng-keyup,ng-keypres working example.
When you type , each keypress mode is detected and color change accodingly.
3.Example 3 is of is ng-mouseleave ,ng-mouseover,ng-mousedown working example . When mouse move , mouse down , mouse leave over the yellow area.The event is detected and color is changed automatically.
4.Example 4 is of is ng-copy , ng-paste working example.Write a Text,then press Ctrl+C to copy , clear the area ,Ctrl+V to paste.
You will notice , that copy / paste event is detected.
|
||
| ||
|
||
|
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<style>
.square
{
background:
#FFEFBB;
width:
7vw;
height:
7vw;
padding:
10px
20px;
text-align:
center;
}
</style>
<script>
var
myApp = angular.module('myApp',
[]);
myApp.controller("myController",
function
($scope)
{
//------------1.Example
ng-blur,ng-focus---------------------//
$scope.focusColor
= "#E5E5E5";
$scope.focusText
= "";
$scope.onFocus
= function
() {
$scope.focusColor
= "#01A1DC";
$scope.focusText
= "ng-focus";
};
$scope.onFocusLeave
= function
()
{
$scope.focusColor
= "#E5E5E5";
$scope.focusText
= "ng-blur";
}
//-------------2.Example
ng-keydown/ng-keyup/ng-keypres--------------------//
$scope.KeyColor
= "#E5E5E5";
$scope.KeyText
= "";
$scope.onKeydown
= function
()
{
$scope.keyColor
= "#1F76BB";
$scope.KeyText
= "ng-keydown";
};
$scope.onkeypress
= function
()
{
$scope.keyColor
= "#FE6602";
$scope.KeyText
= "ng-keypress";
}
$scope.onKeyup
= function
()
{
$scope.keyColor
= "#FE6602";
$scope.KeyText
= "ng-keyup";
}
//--------------3.Example
ng-mouseleave/ng-mouseover/ng-mousedown-------------------//
$scope.MouseColor
= "#E5E5E5";
$scope.MouseText
= "";
$scope.onMouseleave
= function
()
{
$scope.MouseColor
= "#FE6602";
$scope.MouseText
= "ng-mouseleave";
}
$scope.onMouseover
= function
()
{
$scope.MouseColor
= "#CCE4F7";
$scope.MouseText
= "ng-mouseover";
}
$scope.onMousedown
= function
()
{
$scope.MouseColor
= "#87C540";
$scope.MouseText
= "ng-mousedown";
}
//------------4.Example
ng-copy / ng-paste---------------------//
$scope.CopyPaste
= "";
$scope.onCopy
= function
()
{
$scope.CopyPaste
= "Text
Copied";
}
$scope.onPaste
= function
()
{
$scope.CopyPaste
= "Text
Pasted";
}
});
</script>
<div
ng-app="myApp"
ng-controller="myController"
style="width:
600px;">
<table
border="0"
cellpadding="0"
cellspacing="0"
>
<tr>
<td>
<table
border="1"
cellpadding="0"
cellspacing="0"
style="width:
400px;">
<tr>
<td>
<span
style="color:#C75050;"><b> 1.Example
ng-blur,ng-focus</b></span></br>
</br><span> Color
Change on focus </span>
</td>
</tr>
<tr>
<td>
<input
type="text"
style="background-color:{{focusColor}}";
ng-blur="onFocusLeave()"
ng-focus="onFocus()"
/> <span>{{focusText}}</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table
border="1"
cellpadding="0"
cellspacing="0"
style="width:
400px;">
<tr>
<td>
<span
style="color:#C75050;"><b> 2.Example
ng-keydown/ng-keyup/ng-keypres</b></span></br>
</br><span> Color
Change on key up/down/press </span>
</td>
</tr>
<tr>
<td>
<input
type="text"
style="background-color:{{keyColor}}";
ng-keydown="onKeydown()"
ng-keyup="onKeyup()"
ng-keypress="onkeypress()"
/> <span>{{KeyText}}</span>
</td>
</tr>
</table>
<tr>
<td>
<table
border="1"
cellpadding="0"
cellspacing="0"
style="width:
400px;">
<tr>
<td>
<span
style="color:#C75050;"><b> 3.Example
ng-mouseleave/ng-mouseover/ng-mousedown</b></span></br>
</br><span> Color
Change on focus </span>
</td>
</tr>
<tr>
<td>
<div
ng-mouseleave="onMouseleave()"
ng-mouseover="onMouseover()"
ng-mousedown="onMousedown()"
class="square"
style="background-color:{{MouseColor}}";
>Move
& Hold your mouse</div> <span>{{MouseText}}</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table
border="1"
cellpadding="0"
cellspacing="0"
style="width:
400px;">
<tr>
<td>
<span
style="color:#C75050;"><b> 4.Example
ng-copy / ng-paste</b></span></br>
</br><span> Enter
text ,Press Ctrl+C/Ctrl+V to Copy/Paste, you will notice ,AjgulaJs
can capture Copy/Paste </span>
</td>
</tr>
<tr>
<td>
<div
class="square"
contenteditable="true"
style="max-height:
100px;overflow:
auto;"
ng-copy="onCopy()"
ng-paste="onPaste()"
></div>
<span>{{CopyPaste}}</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
$event Object
An event can be passed through a function as an argument.Below is the example , where event is passed ($event) as an argument.
Example :
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
myApp = angular.module('myApp',
[]);
myApp.controller("myController",
function
($scope)
{
$scope.onMouseOver
= function
(e)
{
$scope.screenx
= e.screenX;
$scope.screeny
= e.screenY;
$scope.ctrlkey
= e.ctrlKey;
$scope.altkey
= e.altKey;
}
});
</script>
<div
ng-app="myApp"
ng-controller="myController"
style="width:
600px;">
<span>You
can Press Control Key or Alt Key </span>
<input
type="text"
ng-mousemove="onMouseOver($event)"
value="Mouse
Over Here"
/></br>
<div>screenX
:</div><div>{{screenx}}</div>
<div>screenY
:</div><div>{{screeny}}</div>
<div>Control
Key :</div><div>{{ctrlkey}}</div>
<div>Alt
Key :</div><div>{{altkey}}</div>
</div>
Output :
Here the event is Mouse Event , the object is passed as MouseEvent object.You can get the regular properties of MouseEvent object as like javscript.Below is some of the properties.
- MouseEvent.altKey
- MouseEvent.button
- MouseEvent.clientX
- MouseEvent.clientY
- MouseEvent.ctrlKey
- MouseEvent.shiftKey
No comments:
Post a Comment