Home > Developer > JavaScript
Next we will go on journey 4 to continue our Javascript DOM journey 5. This blog post focuses on Event bubbling and Dom modification element styles. Therefore, there are many examples in this blog, such: the switch-on and switch-on effects of web pages, the color-changing effects of text boxes, and the implementation of scoring controls are common in Web pages.
(1) event bubbling: If element a is nested in element B, The onclick event of A is triggered, and The onclick event of B is also triggered, the trigger sequence is "from inside to outside ". Verification: Add a table on the page, TR in the table, TD in the TR, and P in the TD. Add the onclick Event Response in the P, TD, TR, and table.
<Body onclick = "alert ('body onclick')">
<Table onclick = "alert ('table onclick')">
<Tr onclick = "alert ('tr onclick')">
<TD onclick = "alert ('td onclick')">
<P onclick = "alert ('P onclick')"> click </P>
</TD>
</Tr>
</Table>
</Body>
(2) Others
1) this in the event, except for the event. srcelement In the event response function, this indicates the control in which an event occurs. This can be used only in the event response function to obtain the control in which an event occurs. This is not always used in functions called in the event response function, if you want to use this function, you must pass this to the function or use event. srcelement. (*) The Semantics of this and event. srcelement is different. This indicates the event being monitored, event. srcelement is the object that triggers the event, and event bubbles.
<SCRIPT type = "text/JavaScript">
Function btnclick2 (){
Alert (this. Value); // The event object cannot be obtained through this in the function called by the event response function.
}
Function btnclick3 (BTN ){
Alert (BTN. Value); // you can pass this in the event response function.
}
Function btnclick4 (){
Alert (event. srcelement. value );
}
</SCRIPT>
<Input type = "button" value = "click" onclick = "alert (event. srcelement. Value)"/>
<Input type = "button" value = "click1" onclick = "alert (this. Value)"/>
<Input type = "button" value = "click2" onclick = "btnclick2 ()"/>
<Input type = "button" value = "click3" onclick = "btnclick3 (this)"/>
<Input type = "button" value = "click4" onclick = "btnclick4 ()"/>
2) Easy to error: modifying the style of an element is not a class attribute, but a classname attribute.
<Style type = "text/CSS">
. Day {
Background-color: green;
}
. Night {
Background-color: black;
}
</Style>
<Div class = "day" id = "divtest">
<Font color = "red"> Han Yinglong </font>
</Div>
<Input type = "button" value = "Switch" onclick = "document. getelementbyid ('divtest'). classname = 'Night ';"/>
3) Example
(1) The CSS style can be referenced in the previous case.CodeAs follows:
<SCRIPT type = "text/JavaScript">
(Document. Body. classname = "day "){
Document. Body. classname = "night ";
B function switchlight (){
VaR btnswitch = Document. getelementbyid ("btnswitch ");
If tnswitch. value = "turn on the light ";
}
Else {
Document. Body. classname = "day ";
Btnswitch. value = "turn off the light ";
}
}
</SCRIPT>
<Body class = "night">
<Input type = "button" id = "btnswitch" value = "turn on" onclick = "switchlight ()"/>
</Body>
(3) Easy to error: Use "style. attribute name. Note that the attribute names in CSS may be different when they are operated in Javascript, mainly including those attributes containing, because "-" in Javascript cannot be used as an attribute, the class name. In CSS, the background color is background-color, while in Javascript, the background color is style. background; the element style name is class. In JavaScript, It is the classname attribute, font-size-> style. fontsize; margin-top-> style. margintop.
<Input type = "button" value = "click" onclick = "This. style. Background = 'red'"/>
(1) Case 1: create three input text boxes. When the cursor leaves the text box, if the text box is empty, set the background color of the text box to Red. If it is not empty, it is white. Tip: the event that the focus enters the control is onfocus, and the event that the focus leaves the control is onblur.
Note: <input type = "text" onblur = "alert ('first out of focal point')"/>
<Input type = "text" onfocus = "alert ('second focal point')"/>
Code: <SCRIPT type = "text/JavaScript">
Function initevent () {// traverses all input controls and adds
VaR inputs = Document. getelementsbytagname ("input ");
For (VAR I = 0; I <inputs. length; I ++ ){
VaR input = inputs [I];
Input. onblur = inputonblur; // response function of the onblur event where the inputonblur function is set as the input element
}
}
Function inputonblur () {// check data when the focus is lost
// Inputonblur is the response function of onblur, rather than the function called by the response function. Therefore, you can use this to obtain the event object.
If (this. value. Length <= 0) {// check the text length in the text box. If C <= 0, it indicates it is null.
This. style. Background = "red ";
}
Else {
This. style. Background = "white ";
}
}
</SCRIPT>
<Body onload = "initevent ()">
<Input type = "text"/> <br/>
<Input type = "text"/> <br/>
<Input type = "text"/>
</Body>
(2) Case 2: Scoring control, which uses a single row and five columns of the table to listen to the click event of TD. When you click a TD, change the background of the TD and earlier td to red, and the background of the later td to white. When you move the mouse over the score control, a hyperlink icon is displayed. Demonstration: jquery version.
<SCRIPT type = "text/JavaScript">
Function indexof (ARR, element) {// alert (indexof ([1, 5, 3], 3 ));
For (VAR I = 0; I <arr. length; I ++ ){
If (ARR [I] = element ){
Return I;
}
}
Return-1;
}
Function initevent () {// Add an onclick event to all TD
VaR tablerating = Document. getelementbyid ("tablerating ");
VaR TDS = tablerating. getelementsbytagname ("TD"); // obtain all IDS under tablerating
For (VAR I = 0; I <TDs. length; I ++ ){
VaR TD = TDS [I];
TD. onclick = tdonclick;
TD. style. cursor = "Pointer"; // place the mouse over td to display the hand-shaped cursor
}
}
Function tdonclick (){
VaR tablerating = Document. getelementbyid ("tablerating ");
VaR TDS = tablerating. getelementsbytagname ("TD ");
VaR Index = indexof (TDS, this );
For (VAR I = 0; I <= index; I ++ ){
VaR TD = TDS [I];
TD. style. Background = "red ";
}
For (VAR I = index + 1; I <TDs. length; I ++ ){
VaR TD = TDS [I];
TD. style. Background = "white ";
}
}
</SCRIPT>
</Head>
<Body onload = "initevent ()">
<Table id = "tablerating">
<Tr>
<TD>★</TD> <TD>★</TD> <TD>★</TD> <TD>★</TD> <TD>★</TD>
</Tr>
</Table>
</Body>
(3) Exercise 1: Single-choice effect of a hyperlink. There are several hyperlinks on the page. When you click a hyperlink, the clicked hyperlink becomes a red background, and other hyperlink backgrounds are restored to white, window. event. returnvalue = false.
<SCRIPT type = "text/JavaScript">
Function initevent (){
VaR links = Document. getelementsbytagname ("");
For (VAR I = 0; I <links. length; I ++ ){
VaR link = Links [I];
Link. onclick = linkonclick;
}
}
Function linkonclick (){
VaR links = Document. getelementsbytagname ("");
// Do not place links in global variables. Do not use global variables whenever possible. If there are too many repetitive code, place the code in a public function.
For (VAR I = 0; I <links. length; I ++ ){
VaR link = Links [I];
If (link = This ){
Link. style. Background = "red ";
}
Else {
Link. style. Background = "white ";
}
Window. event. returnvalue = false; // prevents the hyperlink from being opened.
}
}
</SCRIPT>
<Body onload = "initevent ()">
<A href = "http://www.baidu.com"> Baidu </a>
<A href = "http://www.cnblogs.com"> blog </a>
<A href = "http://www.sina.com"> Sina </a>
</Body>
(4) Exercise 2: click the button to change the color of the table across rows. Even numbers are yellow backgrounds, and odd numbers are default colors. Use getelementbytagname of the table to retrieve all tr values and traverse them for the next time, color changes if the row is an even number.
<SCRIPT type = "text/JavaScript">
Function showit (){
VaR tablemain = Document. getelementbyid ("tablemain ");
VaR TDS = tablemain. getelementsbytagname ("TR ");
For (VAR I = 0; I <TDs. length; I ++ ){
If (I % 2! = 0 ){
VaR TR = TDS [I];
Tr. style. Background = "yellow ";
}
}
}
</SCRIPT>
<Body onload = "showit ()">
<Table id = "tablemain">
<Tr> <TD> like </TD> <TD> 100 </TD> </tr>
<Tr> <TD> dislike </TD> <TD> 10 </TD> </tr>
<Tr> <TD> dormitory </TD> <TD> 100 </TD> </tr>
<Tr> <TD> Han Yinglong </TD> <TD> 200 </TD> </tr>
<Tr> <TD> blog </TD> <TD> 300 </TD> </tr>
</Table>
<Input type = "button" value = "barrier color" onclick = "showit ()"/>
</Body>
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
