Native JavaScript Event detailed __java

Original source: http://www.cnblogs.com/iyangyuan/p/4190773.html

jquery This write less do more frame, with a lot of will inevitably to native JS Yangaoshoudi.

Small dishes In fact do not want to write this blog, seemingly very elementary appearance, but see the network even the original JS event binding and lifting all said not understand, or decided to science a bit.

First of all, the side dishes understand is not a lot, just to share my thoughts with you.

DOM0 Event Model

The event model is evolving, and the early event model is called the DOM0 level.

The DOM0 event model is supported by all browsers.

Registering an event name directly on a DOM object is DOM0 writing, such as:

1 document.getElementById ("Test"). onclick = function (e) {};

It means registering an onclick event. Of course, it and this writing is a meaning:

1 document.getElementById ("test") ["onmousemove"] = function (e) {};

It's nothing, is just two ways to access the properties of JS object, [] The form is mainly to solve the property name is not a valid identifier, such as: object.123 affirmation error, but object["123"] to avoid this problem, at the same time, [] The writing, also put JS write live, The property name is represented by a string, and the event can be dynamically bound at run time.

To get to the point, when an event is triggered, a parameter e is passed in by default, representing the event object, through E, we can obtain a lot of useful information, such as the coordinates of the click, the DOM element that triggers the event, and so on.

Based on DOM0 events, for the same DOM node, you can only register one, and the same event that is registered after it overwrites the previously registered. For example:

1 var btn = document.getElementById ("test");
2 
3 Btn.onmousemove = function (e) {
4   alert ("OK");
5};
6 
7 btn["onmousemove"] = function (e) {
8   alert ("Ok1");
9};

The result is output ok1.

Then say this again. When an event is triggered, this means that the event is triggered on which DOM object. For example:

1 var btn = document.getElementById ("test");
2 
3 Btn.onmousemove = function (e) {
4   alert (this.id);
5};

Results output test. Because the event is registered on a DOM node with the ID test, this, of course, represents the DOM node when the event is triggered, and it can be understood that the event was invoked by this DOM node.

So, it's fairly easy to dismiss an event, you just need to register one more event and set the value to NULL, for example:

1 var btn = document.getElementById ("test");
2 
3 Btn.onclick = function (e) {
4   alert ("OK");
5};
6 
7 Btn.onclick = null;

The principle is that the last registered event is overwritten before the last registration event is set to NULL, and the event binding is lifted.

It's not over yet, the DOM0 event model also involves events that are written directly in HTML. For example:

1 <div id= "test" class= "test" onclick= "exec ();" ></div>

Events registered in this manner also follow the overriding principle, which can only be registered for one and the last to take effect.

The difference is that the registered event is equivalent to a dynamic call function (a bit of an eval), so it does not pass in the event object, and this points to window and is no longer a DOM object that triggers the event.

DOM2 Event Model

The DOM2 event model, relative to DOM0, only understands the following two points:

· DOM2 supports registering multiple homogeneous events with the same DOM element.

· DOM2 has added the concept of capture and bubbling.

DOM2 events are managed through AddEventListener and RemoveEventListener, of course, this is standard.

But IE8 and the following version of the browser, to amuse themselves, made a corresponding attachevent and detachevent, due to the side dishes talents, this article does not discuss.

AddEventListener Of course is the registration event, she has three parameters, namely "event name", "Event callback", "Capture/bubbling". As an example:

1 var btn = document.getElementById ("test");
2 
3 Btn.addeventlistener ("click", Function (e) {
4   alert ("OK");
5}, False);

The event name is needless to say, compared to DOM0, the front is removed.

The event callback is also well understood, and the event triggers you to be notified. The callback, like DOM0, also defaults to an event parameter, and this is the DOM node that triggers the event.

The last argument is a Boolean, and true represents the capture event, and false represents the bubbling event. Actually very good understanding, first come to a schematic:

This means that an element triggers an event, the first to be notified is window, and then the document, in turn, until the element that actually triggers the event (the target element) is captured. Next, the event bubbles up from the target element, and then out in turn, until the Window object, and the process is bubbling.

Why do you design this way? This seems to be due to the deep historical origins, small dishes also do not understand, it is not nonsense.

As you can see, capturing events is triggered first than bubbling events.

Suppose you have such an HTML structure:

1 <div id= "test" class= "Test" >
2   <div id= "Testinner" class= "Test-inner" ></div>
3 </ Div>

Then we register the two click events on the outer Div, capturing events and bubbling events, respectively, as follows:

1 var btn = document.getElementById ("test");
 2 
 3//Capture Event
 4 Btn.addeventlistener ("Click", Function (e) {
 5   alert ("Ok1");
 6}, True);
 7 
 8//Bubbling event
 9 Btn.addeventlistener ("click", Function (e) {   alert ("OK");
One}, False);

Finally, click on the inner Div, first pop-up ok1, and then pop OK. Combined with the schematic above, the outer div is equivalent to the body in the diagram, the inner div is the same as the bottom div, proof that the capture event executes first, and then executes the bubbling event.

Why should you emphasize clicking on the inner div? Because the DOM element that really triggers the event must be an inner layer, the outer DOM element has the opportunity to simulate the capture event and the bubbling event, as you can see from the schematic diagram.

If you register a catch event and bubbling event on the DOM element that really triggers the event.

HTML structure ibid., JS code as follows:

1 var btninner = document.getElementById ("Testinner");
 2 
 3//Bubbling Event
 4 btninner.addeventlistener ("Click", Function (e) {
 5   alert ("OK");
 6}, False);
 7 
 8//Capture Event
 9 Btninner.addeventlistener ("click", Function (e) {   alert ("Ok1");
One}, True);