Introduction to common events bind, hover, toggle and other examples in jquery_jquery

1.$(document).ready()

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

When a document is completely downloaded to the browser, the window.onload event is triggered. The event handler registered using $(document).ready() will run the code after the html is downloaded and parsed into a Dom tree, but it does not mean that all associated files have been downloaded.

There is generally only one onload event handler in a page, and it can only save a reference to one function at a time; while $(document).ready() can have multiple.

Generally speaking $(document).ready() is better than using onload event handler. However, if the associated file has not been loaded, there will be problems with calling attributes such as image height and width, so you need to choose the appropriate method at different times.

$(document).ready() has three ways of writing, namely:

$(document).ready(function(){ 

//thisis the coding... 

});


$().ready(function(){ 

//thisis the coding... 

});


$(function(){ 

//thisis the coding... 

});

2. Event binding

Grammar

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

Parameters and description:

event: required. Specifies one or more events to be added to the element. Multiple events separated by spaces. Must be a valid event.

data optional. Specifies additional data to be passed to the function.

function required. Specifies a function to run when an event occurs.

The corresponding one is unbind(): remove event

Eg: $(‘#idchoose’).unbind(“click”,Function_Name)

Abbreviation binding event: Generally prefer abbreviation

$("#dividelement").bind("click",function(){//do something})改写为：

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

jQuery binds events to elements by using the .bind() method, and unbinds elements by using the .unbind() method. Moreover, the .bind() method can perform multiple bindings. If there is no binding, it is safe when unbinding.

Many times an event only needs to be triggered once, and then it must be unbound immediately. According to the traditional approach, we may bind the event first, and then unbind it after the event is executed. jQuery provides us with a shorthand method.one to specifically solve the tedious code writing in the above scenario. The example is as follows:

$(document).ready(function(){

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

});

By the way, the advantage of using bind to bind events is that you can define custom events and bind multiple events at one time.

3. Synthetic events

When capturing events, it is often necessary to capture combined user operations and respond with multiple functions. These events are called composite events.

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

.hover(enter,leave) A method that simulates hover events (the mouse moves over and out of an object). This is a custom method that provides a "keep in it" state for frequently used tasks.

$(function(){

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

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

},function(){

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

})

})

.toggle(fn1,fn2,..fnN) Toggles the function to be called each time it is clicked. Used to simulate continuous mouse click events. Example:

$(function(){

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

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

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

},function(){

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

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

});

})

4. Event objects and event bubbling

Event object: Using event objects in programs is very simple. You only need to add a parameter to the function, eg:

$(“element”).click(function(event){

//event:事件对象

})

When the "element" element is clicked, the event object is created. This object can only be accessed by event handlers. When the event handling function completes execution, the event object is destroyed.

Event Capture: A strategy that allows multiple elements to respond to events. During the event capture process, the event is first handed to the outermost element, and then to more specific elements. (body->div->span)

Event bubbling: Another opposite strategy is called time bubbling. When an event occurs, it will be sent to the most specific element first. After this element gets a chance to respond, the event will bubble up to more general elements. . Event bubbling can sometimes have side effects, leading to unexpected behavior. (span->div->body)

Three ways to prevent events from bubbling

Events can be terminated before the default action is initiated by calling the .preventDefault() method.

Call event.stopPropagation() to stop event propagation

jQuery provides a .stopPropagation() method, which can completely prevent event bubbling.

5. Use the event.tatget attribute to clarify the event object

The event in the event handler saves the event object. The event.tatget attribute stores the target element where the event occurred. This attribute is specified in DOMAPI, but is not implemented by all browsers. jQuery makes the necessary extensions to this event object so that this property can be used in any browser. Through .target, you can determine the element in the DOM that first received the event. Moreover, we know that this refers to the DOM element that handles the event.

Use the event.tatget attribute to clear the event object and prevent the event from bubbling. The code is as follows:

$(document).ready(function(){ 

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

if(event.target== this) 

{

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

}

};)

});

For other event object attributes, please refer to the introduction on w3c.