Home Ajax Jquery Using the jQuery event object

Using the jQuery event object
Posted on: April 18, 2011 at 12:00 AM

This page discusses - 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.

<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).

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

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' .

event.preventDefault

This method triggers the default action of the event.

Example :

Following code prevents the page to navigate further on the given link :

<body> <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 :

Following code alert the element type being entered on mouseout, the mouseout indicates the element being entered :

Example :

$("a").mouseout(function(event) { 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 :

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()

This method prevents other event handlers from being called.

Example :

$("p").click(function(event){ 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 :

Following code kills the bubbling on the click event :

<script>$("p").click(function(event){ event.stopPropagation(); // do something }); </script>

event.target

This method can store the name of the DOM element that initiated the event.

Example :

Following code display tag's name on click :

<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.

Example :

Following code alerts the time since click handler last executed :

<script>var last; $(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 :

Following code display event type on mouse click on 'a href 'link :

$("a").click(function(event) { alert(event.type); // "click" });

event.which

This attribute tells us which button or key was pressed.

Example :

Following tells us which key was pressed :

<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.

Related Tags for Using the jQuery event object:

«Previous Index Next»