Js learning Summary-dom2-level basic knowledge, jsdom2

Js learning Summary-dom2-level basic knowledge, jsdom2

The DOM2 event binding we use actually enables the box to always find the addEventListener method on the EventTarget built-in class prototype through the prototype chain.

DOM0-level event binding: only one action of an element can be bound to a method once. The second binding will overwrite the previous one.

DOM2: You can bind multiple methods to the same behavior of an element.

Box. addEventListener ('click', function (e) {console. log (1)}, false) box. addEventListener ('click', function (e) {console. log (2)}, false) // output 1 2

DOM2: The behavior type in DOM0. We can bind it with the same DOM2, and DOM2 also provides some behavior types not available in DOM0-> DOMContentLoaded: behavior triggered when the DOM structure (HTML structure loading is complete) in the page

box.addEventListener('DOMContentLoaded',function(e){          },false)

Window. onload = function () {}// when all resources on the page are loaded (images, HTML structures, audio and video ...) the subsequent function will be executed, and can only be used once on a page, and the previous function will be overwritten after the write;-> because it is bound by a DOM0 event, therefore, only $ (document) can be bound once ). ready (function () {}) //-> $ (function () {})/* If the HTML structure on the page is loaded, the corresponding function is executed; it can appear multiple times on the same page. Therefore, this is the binding of the DOM2 event. The binding behavior is DOMContentLoaded */

DOM2-level add and remove event details

Function fn1 (e) {console. log (this);} // Add event box. addEventListener ('click', fn1, false); // remove the event box. removeEventListener ('click', fn1, false );

Note: three parameters must be ensured during the removal: behavior, method, and stage at whichThe three parameters must be consistent.-> When DOM2 is bound, we usually bind it with a real-name function.

Only one element can be bound to one action."Different"(If the methods are the same, only one can be left)

When a behavior is triggered, the binding method is executed sequentially according to the binding sequence. The execution of this is the element of the currently bound event.

Function fn1 () {console. log (1);} // Add event box. addEventListener ('click', fn1, false); box. addEventListener ('click', fn1, false); // output only one

The above involves a concept:Event pool (used to store the method for binding the current element behavior, built-in mechanism of the browser)As shown in

But in the IE6-8 browser, addEventListener is not supported, if you want to implement DOM2 event binding, you can only use attachEvent/detachEvent

It has only two parameters and cannot control the phase in which the listener occurs like addEventListener. It can only occur in the bubble stage by default, and also needs to add on (which is particularly similar to DOM0)

box.attachEvent('onclick',fn1)

Note:Compared with the standard browser's event pool mechanism:

1. Order problems: the order of execution is chaotic, and the standard browser is executed in order of binding.

2. Duplicate problem: the ie6-8 can bind multiple identical methods to the same behavior of the same element

3. this problem: when the method is executed in the ie6-8, this in the method is not the current element box but window

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.