• 1
  • 2
Home > Tips

A Brief Summary on Common JQuery Events

 

This article is a brief summary on common jquery events. Hope that can help you.

 

 1. $(document).ready()

 

$(document).ready() is a typical pattern of responding to the JavaScript built-in onload event and performing the task in jQuery. It has the same effect as onload event. But there is still some differences existing:

When a document is completely downloaded in browser, it will trigger window.onload event. Although the event handler using $(document).ready() to register will run its code after HTML downloads the document successfully and is parsed into Dom Tree, it doesnt mean all the relevant documents have been downloaded completely.

There can be only one onload event handler and only save one reference to a function once in a webpage, but there can be Multiple $(document).ready() event handlers.

Generally, $(document).ready() event handler is superior to onload event handler. But if the relevant document is not loaded completely, there might be some problems in the reference to attribute such as image height and width. So we need to select the proper way in difference occasion:

 

Code here:

There are three different ways to write $(document).ready()

> $(document).ready(function() {
//this is the coding...
});

>$().ready(function() {
//this is the coding...
});

>$(function() {
//this is the coding...
});

 

 

 Event Capturing and Bubbling

 

Event Capturing: A kind of strategy to allow multiple elements to respond to an event. During event capturing, the event will be submitted to the elements in the outermost layer and then submitted to more specific elements.

Event Bubbling: A kind of strategy opposite to Event Capturing. During event bubbling, the event will be sent to the most specific element. When the element get a response, the event will bubble up to more general elements. Sometimes this strategy may have side effects which result in some actions you cannot expect.

 

 

 Three ways to prevent bubbling

 

 default action

You can prevent the event before sending the default action by reference to .preventDefault().

 

 Prevent Event Propagation by reference to event.stopPropagation()

jQuery events offer you a way to prevent event propagation. By using this method, you can completely prevent bubbling.

 

Code here:

$(document).ready(function() {
$('switcher').click(function(event){
if(this.id == 'switcher-narrow'){
$('body').addClass('narrow');
}
else if(this.id == 'switcher-large'){
$('body').addClass('large');
}
$('switcher .button').romoveClass('selected');
$(this).addClass('selected');
event.stopPropagation();
};)
});

 

 Use event.tatget attribute to clear the event object

Variables event in event handler save the event object. Event.tatget attribute saves the target element of occurred event. This attribute is set by DOM API, but not realized by all browsers. jQuery event expands the event object necessarily to make all browsers can use this attribute. According to .target, you can confirm the received event element firstly. Besides, we know this reference is the DOM element of handling events.

 

Code here:

 $(document).ready(function() {
$('switcher').click(function(event){
if(event.target == this)
{
$('switcher .button').toggleClass('hidden');
}
};)
});

 

 Common event binding

JQuery events bind event for elements by using .bind().

JQuery events unbind event for elements by using .unbind().

 

.bind() events can be performed a bind repeatedly. If the event isnt bound, its safe when its proceeded with unbound.

 

Most time an event is just triggered once and then need to be unbound immediately. According to traditional method, we should bind the event and then unbind the event when event handler has performed the event completely. jQuery events offer us an abbreviation: .one to avoid the complicated coding.

 

Code here:

$(document).ready(function(){
$('#swotcjer').one('click',toggleStyleSwitcher);
});

 

 composite events 

When we are doing event capturing, we often need to capture combined user operations by taking multiple functions as response, which we called composite events.

 

.read() is one of the most common ways of composite events jQuery offers us.

 

Besides, there are other two functions we could use when we are doing interactive processing.

 

.hover(over,out): An event imitates hover event. Its a user-defined method offering a Stay in it status for frequently used tasks.

 

.toggle(fn,fn): Switch to the function which is need to be extracted on every click.

 

 

Contact Us for Help

 

If you have problems when using our software, we want to hear from you. Send us an email that describes the problem you're having and include a screenshot if possible. [Support Email Address: support@slicemaker.com]

We promise to you we will solve whatever problem youre having within 24 hours.

Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0