记录学习JavaScript中遇到的知识点

1、IE中获取触发事件节点的源对象是通过属性srcElement，而Chrome则是以属性tagName获得。以如下函数getEventTarget(e)实现源对象的获取。

 1 <script tyoe="text/JavaScript">
 2 //获取触发事件节点的源对象
 3     function getEventTarget(e){
 4         e=window.event || e;
 5         return e.srcElement || e.target;
 6     }
 7     document.getElementById("item2").onclick=function(e){
 8         var node=getEventTarget(e);
 9         alert(node.tagName);
10     }
11 </script>
View Code

2、运用getEventTarget(e)函数、CSS和JavaScript自带函数实现<ul></ul>下<li>标签内容的颜色变化：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4     <meta charset="utf-8">
 5     <title>JavaScript Exercises.</title>
 6     <style>
 7     .item-hover{
 8     color:red;
 9     }
10     .item-visit{
11     color:blue;
12     }
13     .item-up{
14     color:yellow;
15     }
16     #item2:hover{
17     color:red;
18     }
19     </style>
20     </head>
21     <body>
22         <h1>This is my first exercise.</h1>
23         <ul>
24             <li id="item1" class="item-hover">item1</li>
25             <li id="item2" onmousedown="this.style.color='#00CCFF'" onmouseup="this.style.color='#AA11FD'">item2</li>
26             <li id="item3" class="item-up" onmousedown="this.className='item-visit'" onmouseup="this.className='item-up'">item3</li>
27         </ul>
28     </body>
29 </html>
30 <script tyoe="text/JavaScript">
31 //获取触发事件节点的源对象
32     function getEventTarget(e){
33         e=window.event || e;
34         return e.srcElement || e.target;
35     }
36     document.getElementById("item1").onclick=function(e){
37         var node=getEventTarget(e);
38         if(node.className=="item-hover"){
39             node.className="item-visit";
40         }
41         else if(node.className=="item-visit"){
42             node.className="item-hover";
43         }        
44     }
45     document.getElementById("item2").onclick=function(e){
46         var node=getEventTarget(e);
47         alert(node.tagName);
48     }
49 </script>
View Code

三个<li></li>分别以不同的方式实现：

（1、item1：以getEventTarget(e)获取鼠标单击的源节点，并以改变className的方式通过CSS的变化改颜色。

（2、Item2：以onmousedown函数直接改变标签颜色样式。

（3、item3：以onmousedown函数以改变className的方式通过CSS的变化改颜色。