Using the jQuery event object
Using the jQuery event object
JQuery has a event system which follows the w3c standards. According to these
standards, this system normalize the event object.
jQuery. Event Constructor
It is incorporated when you are using trigger. The 'new' operator is optional .
Example :
Create a new jQuery.Event object without the â??newâ?? operator.
var e = jQuery. Event("click");
Create a new jQuery.Event object with the â??newâ?? operator (optional).
var e = new jQuery. Event("click");
event.currentTarget
This method gives the current DOM element which is incorporate by the running event.
Example :
Following code alerts that 'currentTarget' matches the 'this' keyword.
$("p").click(function(event) {
alert( event.currentTarget === this ); // true
});
event.data
This method Contains the optional data passed to jQuery.fn.bind when the current executing handler was bound.
Example :
$("a").each(function(i) {
$(this).bind('click', {index:i}, function(e){
alert('my index is ' + e.data.index);
});
});
event.isDefaultPrevented( )
This method checks whether 'event.preventDefault() ' was ever called on this event object.
Example :
Following code checks whether event.preventDefault() was called :
<script>$("a").click(function(event){
alert( event.isDefaultPrevented() ); // false
event.preventDefault();
alert( event.isDefaultPrevented() ); // true
});
</script>
event.isImmediatePropagationStopped( )
This method returns whether event.stopImmediatePropagation() was ever called on this event object.
Example :
<script>$("p").click(function(event){
alert( event.isImmediatePropagationStopped() );
event.stopImmediatePropagation();
alert( event.isImmediatePropagationStopped() );
}); </script>
event.isPropagationStopped( )
This method returns whether event.stopPropagation() was ever called on this event object.
Example :
Following code checks whether event.stopPropagation() was called. 0
<script>$("p").click(function(event){
alert( event.isPropagationStopped() );
event.stopPropagation();
alert( event.isPropagationStopped() );
}); </script>
event.pageX
This method shows the mouse position relative to the left and top edges of the document (within the iframe). 1
Example :
<body>
<div id="log"></div>
<script>$(document).bind('mousemove',function(e){
$("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
}); </script>
</body
event.pageY 2
This method shows the mouse position relative to the left and top edges of the document (within this iframe).
Example :
Same as above given for 'pageX' . 3
event.preventDefault
This method triggers the default action of the event. 4
Example :
Following code prevents the page to navigate further on the given link :
<body>
5
<a href="http://jquery.com">default click action is prevented</a>
<script>$("a").click(function(event){
event.preventDefault();
// do something
}); </script>
</body>
event.relatedTarget
This method can get the other DOM element involved in the event(if any).
Example : 6
Following code alert the element type being entered on mouseout, the mouseout indicates the element being entered :
Example :
$("a").mouseout(function(event) {
7
alert(event.relatedTarget.nodeName); // "DIV"
});
event.result
This attribute contains the last value returned by an event handler that was triggered by this event.
Example : 8
Following code alerts previous handler's return value :
<script>$("p").click(function(event) {
return "hey"
});
$("p").click(function(event) {
alert( event.result );
}); </script>
event.stopImmediatePropagation() 9
This method prevents other event handlers from being called.
Example :
$("p").click(function(event){
0
event.stopImmediatePropagation();
});
event.stopPropagation()
This method prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
Example : 1
Following code kills the bubbling on the click event :
<script>$("p").click(function(event){
event.stopPropagation();
// do something
}); </script>
event.target 2
This method can store the name of the DOM element that initiated the event.
Example :
Following code display tag's name on click : 3
<body>
<div id="log"></div>
<div>
<p>
<strong><span>click</span></strong>
</p>
</div>
<script>$("body").click(function(event) {
$("#log").html("clicked: " + event.target.nodeName);
}); </script>
</body>
event.timeStamp
This attribute returns the number of milliseconds since January 1, 1970, when the event is triggered. 4
Example :
Following code alerts the time since click handler last executed :
<script>var last;
5
$(document.body).click(function(event) {
if( last )
alert( "time since last event " + event.timeStamp
- last );
last = event.timeStamp;
}); </script>
event.type
This method tells us about the nature of the event.
Example : 6
Following code display event type on mouse click on 'a href 'link :
$("a").click(function(event) {
alert(event.type); // "click"
});
event.which 7
This attribute tells us which button or key was pressed.
Example :
Following tells us which key was pressed : 8
<body>
<input id="whichkey" value="type something">
<div id="log"></div>
<script>$('#whichkey').bind('keydown',function(e){
$('#log').html(e.type + ': ' + e.which );
}); </script>
</body>
Learn from experts! Attend jQuery Training classes.
