1. JavaScript asynchronous callback Copy code The code is as follows: <br>//Register the callback function loaded to the processing function window.onload <br>window.onload = loaded; <br>//Pass the method window.alert address to the show function <br>var show = window .alert; <br>function loaded(){ <br>show("success"); <br>} <br> 2, event object Below The js implementation does not cause a line break when typing enter in the textarea text box. That is, disable the Enter key Copy code The code is as follows: < /textarea> <br><script language = "javascript"> <br>/* <br>The tricky part about event objects is that IE's implementation has a lookup table with the W3C specification. IE uses a separate global event object (which can be found in the global variable property window.event), while other browsers use a separate parameter pass that contains the event object. <br>*/ <br>document.getElementsByTagName("textarea")[0].onkeypress = function(e) <br>{ <br>//If the event object does not exist, get the global (IE only) Object <br>var e = e || window.event; <br>//If the Enter key is pressed, return false (so that no action occurs) <br>return e.keyCode != 13; <br>} <br></script> <br> </div> <br>3, this keyword <br> The browser will equate this keyword to the current element that references the function (function containing this keyword) <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="10408" class="copybut" id="copybut10408" onclick="doCopy('code10408')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code10408"> <br><body> <br><div id = "body"> <br><ul class = "links"> <br><li> <br><a href = "/">Home</a> <br></li> ; <br><li> <br><a href = "./">mappath</a> <br></li> <br><li> <br><a href = "../">parentpath</a> <br></li> <br></ul> <br></div> <br></body> <br><script language = "javascript"> <br>var li = document.getElementsByTagName("li"); <br>for (var i = 0; i < li.length; i ) <br>{ <br>li[ i].onclick = handeClick; <br>} <br>function handeClick() <br>{ <br>this.style.backgroundColor = "blue"; <br>this.style.color = "red"; <br>} <br></script> <br> </div> <br>4. Cancel event bubbling<br> Usually when you modify the style of a child element or trigger an event, according to the bubbling principle, its parent The elements will also make the same changes. To prevent this kind of thing from happening, you need to cancel event bubbling. <br> The following example shows that the mouse will add a red border to the current element it is hovering over. If you don't prevent events from bubbling, every time you move the mouse over an element, the element and its parent element will have a red border, which is what we don't want to see. <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="49929" class="copybut" id="copybut49929" onclick="doCopy('code49929')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code49929"> <br><body> <br><div id = "body"> <br><ul class = "links"> <br><li> <br><a href = "/">Home</a> <br></li> ; <br><li> <br><a href = "./">mappath</a> <br></li> <br><li> <br><a href = "../">parentpath</a> <br></li> <br></ul> <br></div> <br></body> <br><script language="javascript"> <br>//Universal function to stop bubbling<br>function stopBubble(e) <br>{ <br>if (e && e.stopPropagation) <br>//w3c method<br>e.stopPropagation(); <br>else <br>//ie method <br>window.event.cancelBubble = true; <br>} <br>var li = document.getElementsByTagName("*"); <br>for (var i = 0; i < li.length; i ) <br>{ <br>//Listen to the user’s mouse, and when it moves to the element, add a red border to the element<br>li[i] .onmouseover = function(e) <br>{ <br>this.style.border = "1px solid red"; <br>stopBubble(e); <br>} <br>//Check the user mouse when moved away element, delete the border we added <br>li[i].onmouseout = function(e) <br>{ <br>this.style.border = "0px"; <br>stopBubble(e); <br>} <br>} <br></script> <br> </div> <br>5. Reload the default behavior of the browser <br> Browsers all have this default behavior, that is, when we click on the <a> tag, it will link to the address of the href attribute. Sometimes We don't want this to happen, but want to implement our own effects, such as popping up a warning box. The example is as follows. <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="31366" class="copybut" id="copybut31366" onclick="doCopy('code31366')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code31366"> <br><a href = "http://www. jb51.net">Reload the browser's default behavior</a> <br><script language = "javascript"> <br>/* <br>In order to achieve the same<a href = "#" onclick = function(){alert("success");}>content</a>Same effect<br>*/ <br>function stopDefault(e) <br>{ <br>//W3C prevents browser defaults Behavior<br>if (e && e.preventDefault) <br>e.preventDefault(); <br>//IE prevents browser default behavior<br>else <br>window.event.returnValue = false; <br> return false; <br>} <br>var a = document.getElementsByTagName("a"); <br>for (var i = 0; i < a.length; i ) <br>{ <br>a[ i].onclick = function(e) <br>{ <br>alert("I have modified the browser's default behavior"); <br>return stopDefault(e); <br>//It seems to be written directly below One sentence can also be <br>//return false; <br>} <br>} <br></script> <br> </div> <br>6. Event affinity (accessibility, also known as accessibility) <br> In order to make your website more friendly, you can think about it this way. When we put the mouse on an element or access it through the keyboard tab key, its style should be consistent, as shown in the following code <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="13612" class="copybut" id="copybut13612" onclick="doCopy('code13612')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code13612"> <br><body> <br><div id = "body"> <br> <ul class = "links"> <br><li> <br><a href = "/">Home</a> <br></li> <br><li> <br><a href = "./">mappath</a> <br></li> <br><li> <br><a href = "../">parentpath< ;/a> <br></li> <br></ul> <br></div> <br></body> <br><script language="javascript"> <br>var a = document.getElementsByTagName("a"); <br>for (var i = 0; i < a.length; i ) <br>{ <br>//Bind mouse hover and focus events Handle the function to the <a> element<br>//When the user hovers the mouse over the link, or focuses on the link (using the keyboard), it will change the background color of <a> to blue<br>a[i].onmouseover = a[i].onfocus = function() <br>{ <br>this.style.backgroundColor = "blue"; <br>} <br>//Bind the mouse to leave and Blur event handler function on <a> element <br>//When the user moves away from the link, it will change the background color of <a> to white <br>a[i].onmouseout = a[i ].onblur = function() <br>{ <br>this.style.backgroundColor = "white"; <br>} <br>} <br></script> <br> </div> <br>7 , bind event listener <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="40316" class="copybut" id="copybut40316" onclick="doCopy('code40316')"><u>Copy code </u></a></span> The code is as follows: </div> <div class="codebody" id="code40316"> <br>//addEventt() to add events <br>//Scott Andrew's original addEvent() function <br>//elm element, document.getElementId('btn1') <br>//evType event name, please note that "onclick" should be changed to "click" , "onblur" should be changed to "blur", which means that the event name should not contain "on", such as Click <br>///fn is of course the bound function, remember not to follow it with parentheses, such as showalert <br>/ /useCapture Boolean value, indicating the response sequence of the event. If userCapture is true, the browser uses Capture, if it is false, the bubbing method is used. It is recommended to use false <br>function addEvent(elm, evType, fn, useCapture) <br>{ <br>if (elm.addEventListener) <br>{//firefox, navigation, etc.. <br>elm.addEventListener(evType, fn, useCapture); <br>} <br>else if (elm. attachEvent) <br>{//IE <br>var r = elm.attachEvent('on' evType,fn); <br>} <br>else <br>{ <br>elm['on' evType] = fn; <br>} <br>} <br>//removeEvent() logout event <br>//parameter name is the same as addEvent() function <br>function removeEvent(elm, evTye, useCapture) <br>{ <br>if (elm.detachEvent) <br>{ <br>elm.detachEvent('on' evType); <br>} <br>else if (elm.removeEventListener) <br>{ <br>elm.removeEventListener(evType , userCapture); <br>} <br>} <br> </div>
