Record the knowledge points encountered in learning JavaScript
1, the source object that gets the trigger event node in IE is through the attribute srcelement, and chrome is obtained by the attribute tagname. Use the following function Geteventtarget (e) To achieve the source object's acquisition.
1 <ScriptTyoe= "Text/javascript">2 //gets the source object that triggered the event node3 functionGeteventtarget (e) {4 e=window.event||e;5 returne.srcelement||E.target;6 }7 document.getElementById ("item2"). onclick=function(e) {8 varnode=Geteventtarget (e);9 alert (node.tagname);Ten } One </Script>View Code
2, using the Geteventtarget (e) function, CSS and JavaScript to carry out the function of the <ul></ul> <li> tag content color change:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8">5 <title>JavaScript exercises.</title>6 <style>7 . Item-hover{8 Color:Red;9 }Ten . Item-visit{ One Color:Blue; A } - . item-up{ - Color:Yellow; the } - #item2: Hover{ - Color:Red; - } + </style> - </Head> + <Body> A <H1>This is my first exercise.</H1> at <ul> - <LiID= "Item1"class= "Item-hover">Item1</Li> - <LiID= "Item2"onmousedown= "this.style.color= ' #00CCFF '"onmouseup= "this.style.color= ' #AA11FD '">Item2</Li> - <LiID= "Item3"class= "Item-up"onmousedown= "This.classname= ' item-visit '"onmouseup= "This.classname= ' item-up '">Item3</Li> - </ul> - </Body> in </HTML> - <ScriptTyoe= "Text/javascript"> to //gets the source object that triggered the event node + functionGeteventtarget (e) { - e=window.event||e; the returne.srcelement||E.target; * } $ document.getElementById ("item1"). onclick=function(e) {Panax Notoginseng varnode=Geteventtarget (e); - if(Node.classname=="Item-hover"){ the Node.classname="Item-visit"; + } A Else if(Node.classname=="Item-visit"){ the Node.classname="Item-hover"; + } - } $ document.getElementById ("item2"). onclick=function(e) { $ varnode=Geteventtarget (e); - alert (node.tagname); - } the </Script>View Code
Three <li></li> are implemented in different ways:
(1, Item1: to Geteventtarget (e) To get the mouse click on the source node, and change the way the classname through the change of CSS color.
(2, ITEM2: Change the label color style directly with the onmousedown function.
(3, Item3: With the onmousedown function to change the way the classname through the change of CSS color.
IE10, Chrome Gets the source object that triggered the event node
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
