JavaScript event capture mechanism "deep analysis of event models in IE and dom" _javascript tips

The JavaScript event capture mechanism is analyzed in the example. Share to everyone for your reference, specific as follows:

1. What is event bubbling?

In the sort algorithm, we've learned bubble sort, which means that bubbles are the things that make the bottom surface, and for event bubbling,

Let's take a look at an example to illustrate what event bubbling is.

<div>
 <button> Testing </button>
</div>
<script>
 $ ("div"). Bind ("click", function () {alert ("div")});
 $ ("button"). Bind ("click", Function () {Alert ("button"});
</script>

When a support event bubble occurs, when we click on the "Test" button, the first thing we do is alert ("button"), and the solid name thinks:

Events are triggered in the order from the most specific event target to the least specific event target (Document object).

When the div,button,html root element has events, the order in which the events are executed is:

Button->div->html

2. What is event capture?

Let's look at event capture, in contrast to event capture, in which the sequence of processing time is the opposite of event bubbling:

<div>
 <button> Testing </button>
</div>
<script>
 $ ("div"). Bind ("click", function () {alert ("div")});
 $ ("button"). Bind ("click", Function () {Alert ("button"});
</script>

Execute this code, First alert ("Div"), and then alert ("button"). We define the concept of event capture :

Events are triggered from the most imprecise object (Document object), and then to the most accurate.

Similarly, if there are binding events on the button,div,html element, then the event is implemented in the following order:

Html->div->button

3. How does each version of the browser handle the event?

(1) in the DOM, which supports event bubbling and event capture, in the standard of the consortium, it is assumed that any event is captured from event capture, the final node is found, and then bubbles are made to the root node.

The functions that support event binding in the DOM are:

AddEventListener ("Event name", function, usercapture);

For the usercapture parameter, the default is False, which supports event bubbling.
If the Usercapture argument is true, event capture is supported.

(2) For many browsers, support AddEventListener method, but IE does not support!

(3) IE in the event processing mechanism, IE only support event bubbling, IE has a unique method of event binding

Attachevent method, this method has two parameters:

Attachevent ("Event name", "function name")

4. How to prevent the spread of events?

Both event bubbling and event capture can be blocked.

(1) First of all in the consortium to prevent the propagation of events: Stoppropagation (), in IE, by setting

Cancelbubble=true;

(2) How do I prevent the default behavior of an event? In the standard of the consortium, the Preventdefault method is used in IE to set

Window.event.returnValue = false;

PS: About JavaScript frequently used events and related instructions can also refer to the site online tools:

JavaScript event and Feature description encyclopedia:
http://tools.jb51.net/table/javascript_event

For more information on JavaScript-related content readers can view the site topics: "JavaScript events related operations and Skills encyclopedia", "JavaScript time and date Operation skills Summary", "JavaScript switching effects and techniques summary", " JavaScript Search Algorithm Skills Summary, "JavaScript animation effects and techniques Summary", "JavaScript Error and debugging skills Summary", "JavaScript data structure and algorithm skills summary", "JavaScript traversal algorithm and skills summary" and The summary of JavaScript mathematical operational usage

I hope this article will help you with JavaScript programming.