Home Ajax Jquery Using the jQuery event object
Questions:Ask|Latest

 
 

Share on Google+Share on Google+

Using the jQuery event object

Advertisement
This page discusses - Using the jQuery event object

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.

Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: April 18, 2011

Related Tutorials

Ask Questions?    Discuss: Using the jQuery event object  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
DMCA.com