Home > Developer > JavaScript
1. JavaScript asynchronous callback
Copy codeThe Code is as follows:
<Script language = "javascript">
// Register the callback function loaded to the processing function window. onload.
Window. onload = loaded;
// Pass the window. alert address of the method to the show function.
Var show = window. alert;
Function loaded (){
Show ("success ");
}
</Script>
2. event object
The following js implementation does not cause line breaks when you press enter in the textarea text box. Disable the Enter key.
Copy codeThe Code is as follows:
<Textarea> </textarea>
<Script language = "javascript">
/*
The tricky part of the event object is that the implementation of IE and W3C specifications have a look-up table. IE uses an independent global event object (which can be found in window. event, the global variable attribute), while other browsers use independent parameters that contain event objects.
*/
Document. getElementsByTagName ("textarea") [0]. onkeypress = function (e)
{
// If no event object exists, obtain the global (IE only) object.
Var e = e | window. event;
// If you press the Enter key, false is returned (so that no action is performed)
Return e. keyCode! = 13;
}
</Script>
3, this keyword
The browser will equate this keyword with the current element that references this function (a function containing this keyword ).
Copy codeThe Code is as follows:
<Body>
<Div id = "body">
<Ul class = "links">
<Li>
<A href = "/"> Home </a>
</Li>
<Li>
<A href = "./"> mappath </a>
</Li>
<Li>
<A href = "../"> parentpath </a>
</Li>
</Ul>
</Div>
</Body>
<Script language = "javascript">
Var li = document. getElementsByTagName ("li ");
For (var I = 0; I <li. length; I ++)
{
Li [I]. onclick = handeClick;
}
Function handeClick ()
{
This. style. backgroundColor = "blue ";
This. style. color = "red ";
}
</Script>
4. Cancel event bubbling
Generally, when you modify the child element style or trigger an event, the parent element will also change according to the bubbling principle. to prevent such events, you need to cancel the event Bubbling Process.
The following example shows that the cursor adds a red border to the current element. If the event is not prevented from bubbling, each time you move the mouse over an element, the element and its parent element will have a red border, which we do not want to see.
Copy codeThe Code is as follows:
<Body>
<Div id = "body">
<Ul class = "links">
<Li>
<A href = "/"> Home </a>
</Li>
<Li>
<A href = "./"> mappath </a>
</Li>
<Li>
<A href = "../"> parentpath </a>
</Li>
</Ul>
</Div>
</Body>
<Script language = "javascript">
// General function for blocking bubbles
Function stopBubble (e)
{
If (e & e. stopPropagation)
// W3c Method
E. stopPropagation ();
Else
// Ie Method
Window. event. cancelBubble = true;
}
Var li = document. getElementsByTagName ("*");
For (var I = 0; I <li. length; I ++)
{
// Listen to the user's mouse. when moving to the element, add a red border to the element.
Li [I]. onmouseover = function (e)
{
This. style. border = "1px solid red ";
StopBubble (e );
}
// Check the user's mouse. When removing the element, delete the border we added.
Li [I]. onmouseout = function (e)
{
This. style. border = "0px ";
StopBubble (e );
}
}
</Script>
5. Reload the default behavior of the browser
Browsers all have this default behavior, that is, when we click on the <a> label, it will link to the address of the href attribute. Sometimes we don't want this to happen, to achieve our own effect, for example, the pop-up warning box, the example is as follows.
Copy codeThe Code is as follows:
<A href = "http://www.jb51.net"> reload the default behavior of a browser </a>
<Script language = "javascript">
/*
To achieve the same effect as <a href = "#" onclick = function () {alert ("success") ;}> content </a>
*/
Function stopDefault (e)
{
// W3C prevents default browser behavior
If (e & e. preventDefault)
E. preventDefault ();
// IE prevents default browser behavior
Else
Window. event. returnValue = false;
Return false;
}
Var a = document. getElementsByTagName ("");
For (var I = 0; I <a. length; I ++)
{
A [I]. onclick = function (e)
{
Alert ("I have modified the default browser behavior ");
Return stopDefault (e );
// It seems that you can write the following sentence directly.
// Return false;
}
}
</Script>
6. Event affinity (accessibility, also known as accessibility)
In order to make your website more friendly, you can consider this. When we place the mouse on an element or access it through the tab key on the keyboard, the style should be consistent, as shown in the following code:
Copy codeThe Code is as follows:
<Body>
<Div id = "body">
<Ul class = "links">
<Li>
<A href = "/"> Home </a>
</Li>
<Li>
<A href = "./"> mappath </a>
</Li>
<Li>
<A href = "../"> parentpath </a>
</Li>
</Ul>
</Div>
</Body>
<Script language = "javascript">
Var a = document. getElementsByTagName ("");
For (var I = 0; I <a. length; I ++)
{
// Bind the mouse hover and focus event handler function to the <a> element
// When you hover your mouse over the link, or (use the keyboard) to focus on the link, the background color of <a> changes to blue.
A [I]. onmouseover = a [I]. onfocus = function ()
{
This. style. backgroundColor = "blue ";
}
// Bind the mouse exit and Fuzzy Event Handler to the <a> element
// When the user removes the link, the background color of <a> is white.
A [I]. onmouseout = a [I]. onblur = function ()
{
This. style. backgroundColor = "white ";
}
}
</Script>
7. Bind event listening
Copy codeThe Code is as follows:
// AddEventt () add events
// Scott Andrew's original addEvent () function
// Elm element, document. getElementId ('btn1 ')
// EvType event name. Note that "onclick" should be changed to "click", "onblur" should be changed to "blur", that is, the event name should not contain "on", such as Click
// Fn is the bound function. Remember not to enclose it with parentheses, such as showalert.
// UseCapture Boolean value, indicating the Event Response sequence. If userCapture is true, the browser uses Capture. If it is false, the bubbing mode is used. We recommend that you 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
// The parameter name is the same as the addEvent () function.
Function removeEvent (elm, evTye, useCapture)
{
If (elm. detachEvent)
{
Elm. detachEvent ('on' + evType );
}
Else if (elm. removeEventListener)
{
Elm. removeEventListener (evType, userCapture );
}
}
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
