Examples of common events such as bind, hover, and toggle in jquery _ jquery

This article mainly introduces commonly used events in jquery, such as $ (document). ready (), bind, hover, toggle, and click. It also provides examples for ease of learning. 1. $ (document). ready ()

$ (Document). ready () is a typical method in jQuery to respond to the onload event built in JavaScript and execute the task. It has a similar effect with onload. However, there are also some differences:

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

A page usually has only one onload event handler, and can only store references to one function at a time. $ (document). ready () can have multiple.

In general, $ (document). ready () is superior to the onload event handler. However, if the associated file is not loaded yet, the calling of attributes similar to the image height and width will be problematic. Therefore, you need to select an appropriate method for different purposes.

$ (Document). ready () has three methods:

$(document).ready(function(){ //thisis the coding... });$().ready(function(){ //thisis the coding... });$(function(){ //thisis the coding... });

2. Event binding

Syntax

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

Parameters and descriptions:

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

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

Required. Specifies the function that runs when an event occurs.

Corresponding unbind (): Remove event

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

Short-form binding event: generally prefer short-form binding event

$ ("# Pidelement "). bind ("click", function () {// do something}) is rewritten to: $ ("# pidelement "). click (function () {// do something}

JQuery binds events to elements by using the. bind () method, and unbinds elements by using the. unbind () method. In addition, the. bind () method can be bound multiple times. If it is not bound, it is safe to unbind it.

In many cases, an event only needs to be triggered once, and then it is necessary to immediately unbind it. According to the traditional practice, we may first bind the event and then unbind it after the event is executed. JQuery provides us with a short method. one to specifically solve the tedious coding in the above scenario, for example:

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

Additionally, bind events can be used to define custom events and bind multiple events at a time.

3. Merging events

When capturing events, you often need 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 common event-compliant methods. In addition, there are two functions used for interactive processing:

. Hover (enter, leave) a method that imitates a hover event (move the mouse over an object and remove it. This is a custom method that provides a "Keep in it" status for frequently used tasks.

$(function(){$("#panelh5.head").hover(function(){$(this).next().show();},function(){$(this).next().hide(); })})

. Toggle (fn1, fn2,... fnN) switches the function to be called each time it is clicked. Used to simulate continuous Mouse clicking 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 bubbles

Event object: it is very simple to use event objects in a program. You only need to add a parameter to the function. For example:

$ ("Element"). click (function (event) {// event: event object })

When you click the "element" element, the event object is created. This object can only be accessed by event processing functions. When the event processing function is executed, the event object is destroyed.

Event Capture: a policy that allows multiple elements to respond to events. In the process of event capturing, the event is first handed over to the elements at the outermost layer, and then to more specific elements. (Body-> p-> span)

Event bubbling: Another opposite policy is time bubbling. when an event occurs, it is first sent to the most specific element. After this element gets a response opportunity, events will bubble up to more general elements. Event bubbling sometimes produces side effects, resulting in unexpected behavior. (Span-> p-> body)

Three methods to prevent event bubbles

You can call the. preventDefault () method to terminate an event before starting the default operation.

Call event. stopPropagation () to stop event Propagation

JQuery provides a. stopPropagation () method that completely prevents event bubbles.

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

Event objects are saved in the event handler. The event. tatget attribute stores the target element of an event. This attribute is specified in DOMAPI but not implemented by all browsers. JQuery makes necessary extensions to this event object so that this attribute can be used in any browser. Through .tar get, you can determine the elements of the event first received in the DOM. Furthermore, we know that this references the DOM elements used to process events.

The following code uses the event. tatget attribute to identify whether an event object blocks event bubbles:

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

For details about other event object attributes, refer to w3c introduction.