A detailed description of jquery events

jquery makes it very simple to respond based on events, in general, there are many kinds of events, but they are used in a similar way, and we can apply fixed code templates to manipulate events. And my main introduction is also some very common events to do examples. First look at the code template for jquery,

Basic events:

An element that binds an event to change the name of the button to MyValue

     $ ("element"). Bind (' event name ',function(e) {              });      // Example     $ ("#button"). Bind (' click ',function(e) {        $ (this). attr (' value ', ' myvalue ') );     });

One element binds multiple events, the following example is a button that clicks on a style, and when clicked removes the style

1$ ("element"). Bind ({2' Event name ':function(e) {3             4         },5' Event name 2 ':function(e) {6             7         }8      });9         varCount = 0;Ten$ (": Button"). Bind ({ One' Click ':function(e) { Acount++; -             if(count% 2 = = 0) { -$( This). attr (' style ', ' Background:yellow '); the}Else { -$( This). Removeattr ("style"); -             } -         } +})

For some of the things we used to do and some common scenarios,

Click event (one mouse click event);

Select Event (When a drop-down list is selected);

Change event (the value of the selected element has changed, generally used in <input:type= "Text,select" >);

Hover event (mouse pointer changes when mouse is moved above);

Focus event (the event that is triggered when focusing on an element, typically used in the <input:type= "text" > Scenario);

The Focusin event (and focus is the difference between the current element and the child element is triggered when any element is focused, and focus is only triggered by the current element);

Blur event (the time that is triggered when the mouse loses focus, the average user enters an element and automatically focuses on the next element);

The Submit event (the event that is triggered when the form form is submitted, is commonly used to empty the content that has been entered, and is used to implement bulk submissions, which is to enter student information or user information without jumping pages);

The Load event (most commonly used is the Documet onload event, typically used in large resource loading scenarios);

Ready event (indicates an event that occurs after the element is loaded);

KeyDown event (an event that occurs when a key is pressed, typically to prevent the scene of submitting a form by pressing the ENTER key);

Bubbling events and default event behavior:

Concept: Bubbling events are events that trigger child element events and parent elements when the child element and parent element are simultaneously bound to the same event when the child element is clicked. Make it impossible to achieve the desired result.

For bubbling events, jquery has two functions to handle:

Stoppropagation (): If a parent element and child element are bound to the same event at the same time, the parent element fires when the default child element is triggered, which prevents the parent element from triggering the event, and only stays in the event of the child element

Stopimmediatepropagation (): If a child element has more than one method bound to the same event at the same time, it is executed sequentially by default, and the method prevents sequential execution and prevents the effect from being overwritten.

1       <DivID= "Top">2           <DivID= "Child1"></Div>3           <DivID= "Child2"></Div>4       </Div>

$ ("div"). css ({
' Width ': ' Auto ',
' Height ': ' 200px ',
});

$ ("#top"). Bind (' click ', function () {
$ (this). CSS (' background ', ' red ');

})

$ ("#child1"). Bind (' click ', function () {
$ (this). CSS (' background ', ' red ');
});

If the Click event in the Chlid1 area is triggered, this is not the desired result, and you can add the stoppropagation element to the Child1 function, then only the selected sub-regions will perform

Click event, the parent zone does not execute the Click event.

The concept of the default event: refers to the HTML element comes with some of the events, such as the point link will jump to the page, click the Submit button will be submitted and so on.

Preventdefault (): Cancels the default event,

     $ ("a"). Bind (' click ',function() {         $ (this). Preventdefault ();         });

The code will unlink the default behavior, the effect is that after clicking the hyperlink will not be in the jump page, generally used to cancel some of the default shortcut keys above.

A detailed description of jquery events