In latest version of jquery 1.3 i have seen interesting is the events which i would like to share with you. These events are the live and the die event which are new in the latest version of jquery 1.3. So in this post i will explain these two event handlers.
Live Event
Binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events. The Live event looks like this.
Where type is one of the events like click, dbclick etc. According to jquery website currently the event type which are supported by the live event are table 1
| Event Type | Event Type |
|---|---|
| click | dbclick |
| mousedown | mouseup |
| mousemove | mouseover |
| mouseout | keyup |
| keydown | keypress |
Table 1 contain the list of event type which are currently supported by the live event handler. You can use one of the above mentioned event type in your live event handler to bind the event to the current element(s) or the element(s) which are added in future in the form. And the events type which are not currently supported is listed in the table 2
| Event Type | Event Type |
|---|---|
| blur | focus |
| mouseenter | mouseleave |
| change | submit |
And the second parameter to the live function is the function to be executed when the event type event is occured.
Now let us start our example of how to use the live event. In the example code i have added a paragraph tag and also two button which are used to bind and unbind the event, in this case i am using the click event type for the example.
$().ready(function()
{
var intCounter=1;
$("p").live("click", ParagraphClick);
$("#cmdBind").click(function ()
{
$("p").live("click", ParagraphClick);
});
$("#cmdUnbind").click(function ()
{
$("p").die("click", ParagraphClick);
});
function ParagraphClick()
{
$(this).after("Paragraph Number:"+intCounter+"");
intCounter++;
}
});
First what i did is to attach click event to the paragraph tag by using the live event handler , by passing the event type of "click" and the function name ParagraphClick funtion name, the paragraphClick function just add new paragraph after the clicking element by calling after function. Now if you click the first paragraph element which contain the text "Click me" which also have different background color, new element is added after the clicking element. Now if you click the new element it(click event of the paragraph) will add new element after the clicking element. Mean the click event which is attached with the first paragraph (which is the current element added at design time) is now also attached with the new element which is created by clicking on the paragraph element. Which is the definition of the live event handler (jquery)
"Binds a handler to an event (like click) for all current - and future - matched element."
"Binds a handler to an event (like click) for all current - and future - matched element."
Die Event
The die event handler will do opposite to the live event , it will unbind the event type.It has following form.
die([type], [fn] )
As from the above definition of teh die event, both parameters are optional, mean if you call the the die without any parameter it will unbind all the event which are bind using the live, and if you want to remove specific event for example click, dbclick etc then you can pass the type and it will unbind on that type of event handler, but if you provide the second parameter then it will unbind that specific event handler, not the other event handler which are attched using the live event.You can download the source code from here
All and any comments / bugs / suggestions are welcomed!
No comments:
Post a Comment