Home Ajax Jquery Event helpers
Questions:Ask|Latest

 
 

Share on Google+Share on Google+

Event helpers

Advertisement
This page discusses - Event helpers

Event helpers

     

Event helpers

As we all know events are actions or occurrences detected by a program. And event handlers are methods which handles the event. And ' event handler attachment ' or ' event helpers ' are those methods which helps them for an specific  purpose. For example 'bind' is used to associate an event with an element which may be paragraph, div, span etc.

Given below the 'event handler attachment' or 'event helpers'  :

.bind()

Click here to see details

.unbind()

Click here to see details

.live()

This method attach a handler to the event for all elements which match the current selector, now or in the future.

Example :

Following code binds the click event to all paragraphs. And add a paragraph to another clicked paragraph :

<body>
<p>Click me!</p>
<span></span>
<script>
$("p").live("click", function(){
$(this).after("<p>Another paragraph!</p>");
});
</script>

.die( )

This method removes the handler which is previously attached using 'live( )' from the elements.

Example :

Following code binds and unbinds events to the buttons :

$("#bindbutton").click(function () {
$("#button1").live("click", aClick)
.text("Can Click!");
});
$("#unbindbutton").click(function () {
$("#button2").die("click", aClick)
.text("Does nothing...");
});

Here 'aclick' is a user defined function which display a 'div' on button click. Using 'die' it detach the click event from 'aClick' function.

.one( )

This method attach the element with an event.  The main difference between it and '.bind()' is that it will execute only once .After this , it is unbind automatically.

Example :

Following code will display an alert box on clicking element 'foo' :

$('#foo').one('click', function() {
alert('This will be displayed only once.');
});

jQuery.proxy( )

This method takes a function and returns a new one that will always have a particular scope.

Example :

It will enforce the function :

var obj = {
 name: "John",
 test: function() {
 alert( this.name );
 $("#test").unbind("click", obj.test);
 }
};

$("#test").click( jQuery.proxy( obj, "test" )

.trigger( )

This method executes the event which is attached with the matched elements.

Example :

Following code triggered the click event on 'foo' element manually .

$('#foo').bind('click', function() {
 alert($(this).text());
 });
$('#foo').trigger('click');

.triggerHandler( )

This method executes all handlers attached to an element for an event :

Example :

$("input").triggerHandler("focus");

Learn from experts! Attend jQuery Training classes.

Advertisement

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: Event helpers  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
Any
June 14, 2011
Ptoblem about the paging link

The link "Previous", "Index", "Next" don't work. I tried in both firefox and ie browser.
DMCA.com