Home > Industries > Internet
See the following code,
function addLoadEvent(func){ var oldload=window.onload; if(typeof window.onload!="function"){ window.onload=func; }else{ window.onload=function(){ oldload(); func(); } }}
So far, the addloadevent method can be used to continuously add methods for window. onload events.
In addition, you can use this function for other events by slightly modifying it.
Node. addeventlistener method.
Specific Code:
VaR BTN = document. getelementbyid ("BTN"); // BTN is a button BTN. addeventlistener ("click", dosomething1, false); BTN. addeventlistener ("click", dosomething2, false );
Therefore, click the BTN button to execute two methods.
It seems that the problem has been solved successfully, but unfortunately it is not. Because IE will jump out and say: "ie does not have this method ".
The implementation on IE is like this:
VaR BTN = Document. getelementbyid ("BTN"); // BTN is a button BTN. attachevent ("onclick", dosomething1); BTN. attachevent ("onclick", dosomething2)
Two functions with the same function have different names and different parameters. (Note that addeventlistener is "click" and attachevent is "onclick ")
Furious.
Although this is a very easy problem to solve, it must be pitted to be discovered. The fight between IE and chrome has hit countless fish pools.
Our smart and witty programmers can always solve this "classic problem" with the classic idea ":
function addEventLoad(node,func){ if(node.addEventListener){ node.addEventListener("click",func,false); } if(node.attachEvent){ node.attachEvent("onclick",func); }}
Or further:
function addEventLoad(object,eventName,func){ if(object.addEventListener){ object.addEventListener(eventName,func,false); } if(object.attachEvent){ object.attachEvent("on"+eventName,func); }}
Continue in-depth (important)
Look at the BTN code:
<button id="btn" title="this is a button">btn</button>
Then there is the code for the two event functions:
function do1(){alert(this.title);}function do2(){alert(this.title);}
Then release the code for the entire test page:
<!DOCTYPE HTML>This page runs on chrome. Three warning boxes are displayed when you click the button:
"Btn1", "This is a button", "This is a button"
However, running on IE is:
"Btn1", "undefined", "undefined"
Internet Explorer abused me thousands of times.
Check: IE does not implement Dom Level 2 (for example, document. addeventlistener belongs to Dom Level 2 ). IE has its own event processing framework. Therefore, in IE, the event handler function is owned by the event framework and does not belong to an object activated by clicking an event or moving the event with the mouse on the xhmlt page. That is to say, the this keyword in do1 and do2 refers to the button in chrome and the IE event framework in IE.
At this point, it seems that the problem is hard to solve, and it is desperate.
In fact, the event handler will get an event object from attachevent () and addeventlistener (). This object has two useful attributes:
"Type": provide the name of the event to be triggered, such as "click"
"Target": indicates the event target, that is, the activated object on the page.
Then, we found the problem again: this event object of chrome and IE is different. In Chrome, the target of the event object is srcelement in IE.
But this is hard to avoid. Let's look at the following functions:
Function getactiveobject (e) {var OBJ; If (! E) {// earlier ie versions will not send this object OBJ = Window. event. srcelement;} else if (E. srcelement) {OBJ = E. srcelement;} else {obj.e.tar get;} return OBJ ;}E is the event object.
In addition, to allow the event handler to use this event object, we need to add a variable to its parameter list, such
do1(e){}Then let's take a look at the modified complete test page:
<! Doctype HTML>So far, this page can get what you want on both chrom and IE.
How to bind a good fish pool event when Internet Explorer and chrome are in conflict
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
