Event bubbling of JQ

You can have multiple events on a page, or multiple elements that respond to the same thing,

Issues caused by event bubbling:

Events that you don't want to use at some point, but are triggered by events bubbling

Solve the problem:

1. Event Object

Because Ie-dom and standard DOM implementations of event objects are different, it becomes difficult to get event objects on different browsers. For this issue, JQ makes the necessary extensions and encapsulation, making it easy to get the event object and some properties of the event object in what browser.

In the program, implementing the event object is very simple, just add a parameter to the function, for example:

$ (Element). bind (' click ', Function (event) {

Event: Events Object

})

When element is clicked, the event object is created, and the event object is accessible only by the event handler, and the event handler is executed and the event object is destroyed.

2 Stop event bubbling

Stopping event bubbling can prevent the event handlers of other objects in the event from being executed. The Stoppropagation () method is provided in JQ to stop event bubbling.

3. Block default behavior

Elements in a Web page have their own default behavior, such as clicking a hyperlink and then jumping, clicking the Submit button, and then submitting the form, sometimes needing to block the default behavior of the element.

In JQ, the Preventdefault () method is provided to block the default behavior of the element.

Example, in a project, you often need to validate the form, and when you click the Submit button, the contents of the form are validated,

For example, if an element is a required field, if an element is 6 bits long, the default behavior of the form is blocked when the form does not meet the submission criteria (form submission);

$ (function () {

$ (obj). bind ("click", Function () {

var username=$ ("#username"). Val ();//Gets the value of the element

if (username= ') {//Determine if the value is empty

$ (' #el '). HTML (' <p> text box value cannot be null </p> ');//hint information

Event.preventdefault ();//block default behavior (form submission);

}

})

})

If you want to stop bubbling and default behavior on the event object at the same time, you can return false in the event handler, which is to call Stoppropagation () and Preventdefalut () on the event object at the same time;

In the example of the form, you can put

Event.preventdefalut ()//block default behavior

Rewrite into

return false;

You can also put the event bubbling example in the

Event.stoppropagation ()//stop event bubbling

Rewrite into

return false;

4. Event Capture

Event capture and event bubbling are two opposite processes, and event captures are triggered from the top down.

Event capture is not supported by all major browsers, and this flaw cannot be fixed by JavaScript, JQ does not support event capture, and if event capture is required, only native JS can be used;

Event bubbling of JQ