Some important instructions for JavaScript events_javascript tips

1. JavaScript asynchronous callback

Copy code The code is as follows:

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:

<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>

3, this keyword
The browser will equate this keyword to the current element that references the function (function containing this keyword)

Copy code The code is as follows:

• 
  Home
  
> ;

• 
  mappath
  


• 
  parentpath
  

4. Cancel event bubbling
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.
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.

Copy code The code is as follows:

• 
  Home
  
> ;

• 
  mappath
  


• 
  parentpath
  

5. Reload the default behavior of the browser
Browsers all have this default behavior, that is, when we click on the 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.

Copy code The code is as follows:

Reload the browser's default behavior

6. Event affinity (accessibility, also known as accessibility)
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

Copy code The code is as follows:

• 
  Home
  


• 
  mappath
  


• 
  parentpath< ;/a>
  

7 , bind event listener

Copy code The code is as follows:

//addEventt() to add events
//Scott Andrew's original addEvent() function
//elm element, document.getElementId('btn1')
//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
///fn is of course the bound function, remember not to follow it with parentheses, such as showalert
/ /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
function addEvent(elm, evType, fn, useCapture)
{
if (elm.addEventListener)
{//firefox, navigation, etc..
elm.addEventListener(evType, fn, useCapture);
}
else if (elm. attachEvent)
{//IE
var r = elm.attachEvent('on' evType,fn);
}
else
{
elm['on' evType] = fn;
}
}
//removeEvent() logout event
//parameter name is the same as addEvent() function
function removeEvent(elm, evTye, useCapture)
{
if (elm.detachEvent)
{
elm.detachEvent('on' evType);
}
else if (elm.removeEventListener)
{
elm.removeEventListener(evType , userCapture);
}
}