记录学习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>
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>
三个<li></li>分别以不同的方式实现：
（1、item1：以getEventTarget(e)获取鼠标单击的源节点，并以改变className的方式通过CSS的变化改颜色。
（2、Item2：以onmousedown函数直接改变标签颜色样式。
（3、item3：以onmousedown函数以改变className的方式通过CSS的变化改颜色。
时间： 2024-10-23 20:38:51