Examples of common events in jquery include bind hover toggle etc

1. The $(document). Ready ()

$(document).ready() is a typical way in jQuery to respond to JavaScript's built-in onload event and perform a task. It has a similar effect to onload. But there are some differences:

When a document is fully downloaded into the browser, the window.onload event is triggered. An event handler registered with $(document).ready() runs after the HTML download is complete and parsed into a Dom tree, but it does not mean that all associated files have been downloaded.

There is usually only one onload event handler in a page, and only one reference to a function can be saved at a time. And $(document).ready() can have more than one.

In general, $(document).ready() is better than using an onload event handler. However, if the associated file has not been loaded, the invocation of attributes like the height and width of the image will be problematic, so the appropriate method needs to be selected at different times.

$(document). Ready () can be written in three ways:

$(document).ready(function(){ 

//thisis the coding... 

});


$().ready(function(){ 

//thisis the coding... 

});


$(function(){ 

//thisis the coding... 

});

2. Event binding

grammar

$(the selector). The bind (event, data, function)

Parameters and description:

Event: required. Specifies one or more events to be added to an element. Multiple events are separated by Spaces. It has to be a valid event.

The data is optional. Specifies the additional data passed to the function.

The function required. Specifies the function to run when an event occurs.

The corresponding is unbind() : remove the event

Eg: $(' # idchoose '). The unbind (" click ", Function_Name)

Abbreviated binding events: generally prefer to be abbreviated

$("#dividelement").bind("click",function(){//Do something})

$("#dividelement").click(function(){//do something }

JQuery USES the.bind() method for event binding of elements, and the.unbind() method for unbinding of elements. Also, the bind() method can bind multiple times, and if there is no bind, it is safe to unbind.

Most of the time an event only needs to be triggered once and then unbound immediately. Traditionally, we might do the event binding first and then unbind after the event has executed. JQuery provides us with a simplified approach. One is dedicated to solving the tedious code writing in the above scenarios, with the following examples:

$(document).ready(function(){

$('#swotcjer').one('click',toggleStyleSwitcher);

});

Incidentally, the benefit of binding events with bind is that you can define custom events and bind multiple events at once.

3. Synthesize events

When doing event capture, it is often necessary to capture the combined user actions and respond with multiple functions, which we call composite events.

The. Ready () method provided by jQuery is one of the most commonly used methods for matching events. In addition, there are two functions used for interactive processing:

Hover (enter,leave) is a method that mimics a hover event (moving the mouse over and out of an object). This is a custom method that provides a "stay in" state for frequently used tasks.

$(function(){

$("#panelh5.head").hover(function(){

$(this).next().show();

},function(){

$(this).next().hide(); 

})

})

Toggle (fn1, fn2,.. FnN) switch the function to be called each time it is clicked. Used to simulate a continuous mouse click event. Example:

$(function(){

$("#panelh5.head").toggle(function(){

$(this).addClass("highlight");

$(this).next().show();

},function(){

$(this).removeClass("highlight");

$(this).next().hide();

});

})

4. Event objects and event bubbles

Event object: using the event object in the program is very simple, just need to add a parameter for the function, eg:

$( " element " ).click(function(event){

//Event: event object

})

When the "element" element is clicked, the event object is created. This object is only accessible by event handlers. When the event handler completes, the event object is destroyed.

Event capture: a policy that allows multiple elements to respond to events. During event capture, the event is given first to the outermost element and then to a more specific element. (the body - > Div - > Span)

Event bubbling: an opposite strategy is called time bubbling. When an event occurs, it is sent to the most specific element first, and after that element gets a chance to respond, the event bubbles up to the more general element. Bubbling can sometimes have the side effect of causing unexpected behavior. (span - > Div - > The body)

Three ways to stop an event from bubbling

The.preventdefault () method is called to terminate the event before the default action is taken.

Call event.stoppropagation () to stop event propagation

JQuery provides a. StopPropagation () method that completely prevents event bubbling.

5. Use the event.tatget property to specify the event object

The event handler holds the event object. The event.tatget attribute holds the target element of the event. This property is specified in the DOMAPI, but not implemented by all browsers. JQuery extends this event object as necessary so that it can be used in any browser. With.target, you can determine which element in the DOM received the event first. Furthermore, we know that this refers to the DOM element that handles the event.

The code that USES the event.tatget property to explicitly prevent the event object from bubbling is as follows:

$(document).ready(function(){ 

$('switcher').click(function(event){

if(event.target== this) 

{

$('switcher.button').toggleClass('hidden'); 

}

};)

});

Other event object properties can be referred to in the w3c.