Common event Patterns
General event handling methods do not add events to nodes in bulk, so event operations are typically done in the following way
<input type= "button" value= ' click ' id= ' btn '/>//another way to create events is basically using this approachvarBTN = document.getElementById (' btn ')); Btn.onclick=function(event) {//an event parameter object that is automatically passed in to an eventConsole.log (Event.type); Console.log ( This. value);}//script must now be after input, otherwise the node cannot be found//Btn.onclick When btn This button is the point to perform the corresponding actionThe possible problems with this clock approach are as follows/*Some of the errors, BTN is null because JS is interpreted to execute, execution to this location and there is no HTML tags exist, so ID btn node also does not exist! */
Event parameters and Window.wvent
In the case of the above event, the default is to pass an event parameter to get some event information, but for IE and Firefox get
Inconsistent mode, IE uses Window.event,firefox to use the event to obtain, the proposed need to use the following methods to solve
function Show (event) { // Special Note: For IE, the event is not automatically passed in, ie needs to be window.event to get events // However, FF does not support window.event, so it is common to use the following to resolve event = Event | | window.event; Console.log (event.type); Console.log (this. InnerHTML);}Window.onload Events
There are two solutions to these problems
Add the onload =x to the body to resolve
functionloadsuccess () {/*Some of the errors, BTN is null because JS is interpreted to execute, execution to this location and there is no HTML tags exist, so ID btn node also does not exist! There are two types of solutions 1, directly in the body, there is an event, called OnLoad, the current code in the Loadsuccess method at this time, it means to put all the elements are load successful before executing 2, using Window.load = x to set the execution of the event (recommended use The method)*/ varBTN = document.getElementById (' btn ')); Btn.onclick=function(event) {//an event parameter object that is automatically passed in to an eventConsole.log (Event.type); Console.log ( This. Value); }}<body onload= ' loadsuccess () ' ></body>using the Window.onload event to resolve//when the window is loaded, execute loadsuccess, note loadsuccess without parenthesesWindow.onload = loadsuccess;
Bulk Add Events
Window.onload =Ready ;functionReady () {varLis = document.getElementsByTagName (' li '); for(vari=0;i<lis.length;i++) {Lis[i].onclick=Show; }}functionShow (event) {//Special note: For IE, does not automatically pass the event this parameter in, ie need to pass window.event to get the event //However, FF does not support window.event, so it is common to use the following method to resolveEvent = Event | |window.event; Console.log (Event.type); Console.log ( This. InnerHTML);}
DOM model and event handling---event handling
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
