IE10Chrome获取触发事件节点的源对象
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了IE10Chrome获取触发事件节点的源对象相关的知识，希望对你有一定的参考价值。
记录学习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的变化改颜色。
以上是关于IE10Chrome获取触发事件节点的源对象的主要内容，如果未能解决你的问题，请参考以下文章