javascript attachEvent binding multiple events execution order problem_javascript skills

Common binding events are directly bound to page elements, such as

. Another method is to separate it and write it in js code. For example, document.getElementById('wrap').onclick = function(){a();}. If you need to bind multiple methods, just write them together directly, such as document.getElementById('wrap').onclick = function(){a();b();} or

. However, we often write a separate binding method bind(el,name,fn) like this. The specific code is as follows.

Copy code The code is as follows:

function bind(el,name,fn){ // Binding event
return el.addEventListener?el.addEventListener(name,fn,false):el.attachEvent('on' name,fn);
}

This way in a Bind multiple click events to the dom object such as

Copy code The code is as follows:

bind( document.getElementById('wrap'),'click',a);
bind(document.getElementById('wrap'),'click',b);

in ie6,7 , there will be a problem with the order of execution under 8 (it is not clear for the time being under ie9, there is no environment test, I hope friends with the environment can help test it), while other browsers ff, chrome, and safari are executed in order. After searching for information, I found that the order of execution is reversed under IE8, while IE6 and IE7 execute randomly. I really don’t understand how IE can execute randomly? Could it be that there is an ulterior motive? If anyone knows the purpose of doing this, please let me know. My own tests have confirmed that ie8 does reverse the order of execution, while ie6 and 7 execute irregularly. I understand that random execution should be in a different order every time it is executed. However, in fact, as long as the order is fixed when writing, the order when executing will also be fixed (although there is no rule, maybe I have not found the rule).

But jQuery’s $.bind(type, data, fn) method does not have this problem. I looked at the original code of jQuery and found that it is also used in it.

Copy code The code is as follows:

if (elem.addEventListener)
　elem.addEventListener(type, handle, false);
else if (elem.attachEvent)
　elem.attachEvent("on" type, handle);

Events bound by this method, but before that, it will be judged whether the jquery object has already been If there are handlers of the same type, they will not be bound repeatedly, but the handle of the object will be merged into the handlers to become a method, which is equivalent to the function c(){a();b();}, which is pressed in sequence. By entering the method in this way, the execution order will not be confused when binding multiple methods under IE.

The following is the reply from netizens:

Will IE6 7 execute randomly? The last time I tested it, the order seemed to be reversed, and there was no such thing as random execution.
I went to test it specially

Copy the code The code is as follows:

test

There is no random mention of IE6. Don't know how you tested it.

Author's answer:
I tested your code under ie6 and ie7 and the order of execution is irregular. Here is the source of the informationhttp://www.w3help.org/zh- cn/causes/SD9011, I also feel that the so-called random execution above is inappropriate. As I said in my blog post, the execution order is irregular, but the order of execution is the same every time. If it is random, then The order of execution should be different every time. This is what I want to explain.