JS中的event.srcElement和event.target

      JS中event.srcElement是IE中的用法，event.target是非IE中的用法．

      event.srcElement 可以捕获当前事件作用的对象，如event.srcElement.tagName可以捕获活动标记名称。

      注意获取的标记都以大写表示，如"TD","TR","A"等。

<script type="text/javascript"> 
    function tdclick(){ 
      if(event.srcElement.tagName.toLowerCase()=='td') 
      alert("行："+(event.srcElement.parentNode.rowIndex+1)+"列："+(event.srcElement.cellIndex+1)); 
    } 
</script> 

      event.srcElement从字面上可以看出来有以下关键字：事件,源，他的意思就是：当前事件的源。我们可以调用他的各种属性：例如document.getElementById("")这样的功能。

      IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的，即：firefox 下的 event.target = IE 下的 event.srcElement。（解决方法：var obj = event.srcElement ? event.srcElement : event.target;）

      在IE中，当发生mouseover事件的时候，e.srcElement可以获得鼠标移入的元素，e.fromElement可以获得鼠标是从哪个元素移入的，e.toElement就是e.srcElement；当发生mouseout事件的时候，e.srcElement可以获得鼠标移出的元素，e.fromElement和e.srcElement是一样的，e.toElement可以获得鼠标移动到当前的元素。

      在DOM中，mouseover和mouseout所发生的元素可以通过e.target来访问，相关元素是通过e.relatedTarget来访问的（在mouseover中相当于IE的e.fromElement，在mouseout中相当于IE的e.toElement）。

      下面是一个菜单列表中用到的程序：

$("childItems").οnmοuseοver=function(e){
　　e=e||window.event;
　　vartarget=e.target||e.srcElement;
　　varrelatedTarget=e.relatedTarget||e.fromElement;
　　if(!$(relatedTarget).descendantOf(this)&&$(relatedTarget)!=this){
　　　　clearTimeout(timeoutId);
　　　　timeoutId=null;
　　}
}
$("childItems").οnmοuseοut=function(e){
　　e=e||window.event;
　　vartarget=e.target||e.srcElement;
　　varrelatedTarget=e.relatedTarget||e.toElement;
　　if(!$(relatedTarget).descendantOf(this)&&$(relatedTarget)!=this){//如果relatedTarget不是ul本身或者不是ul的子元素
　　　　close();
　　}　　
}

      以下是几种常见到的情况(IE下测试通过，如要测试firefox下的event.target可以修改并保存代码后用firefox打开测试)：

event.srcElement.X显示一个控件的各种属性

<div id="div_001"> 
  <form id="form_001"> 
    <input type="button" id="button_001_id" name="button_001_Name" value=" 单击查看" class="button_001_Class" οnclick="Get_srcElement(this)"> 
  </form> 
</div> 
<script> 
  function Get_srcElement(){ 
    var srcElement="" 
    srcElement = srcElement + " " + "event.srcElement.id : " + event.srcElement.id; 
    srcElement = srcElement + " " + "event.srcElement.tagName : " + event.srcElement.tagName; 
    srcElement = srcElement + " " + "event.srcElement.type : " + event.srcElement.type; 
    srcElement = srcElement + " " + "event.srcElement.value : " + event.srcElement.value; 
    srcElement = srcElement + " " + "event.srcElement.name : " + event.srcElement.name; 
    srcElement = srcElement + " " + "event.srcElement.className : " + event.srcElement.className; 
    srcElement = srcElement + " " + "event.srcElement.parentElement.id : " + event.srcElement.parentElement.id; 
    srcElement = srcElement + " " + "event.srcElement.getattribute : " + event.srcElement.getAttribute; 
    alert(srcElement); 
  } 
</script> 

 event.srcElement.selectedIndex一般使用在select对像上：

<select name="selectname" οnchange="alert(event.srcElement.options[event.srcElement.selectedIndex].value)" > 
  <option value="001">1</option> 
  <option value="002">2</option> 
  <option value="003">3</option> 
  <option value="004">4</option> 
  <option value="005">5</option> 
</select> 

     第一个子标签为:event.srcElement.firstChild
     最后个一个是:event.srcElement.lastChild 
     当然也可以用:event.srcElement.children[i] ;event.srcElement.ChildNode[i]
至于event.srcElement.parentElement是指在鼠标所在对象的上一个对象．

<div οnclick="Get_srcElement()"> 
  <div id="001" style="border:1px solid red;width:100%;height:500px"> 
    <span id="node001">这是第1结点div001</span> 
    <div id="002" style="border:1px solid red;width:80%;height:300px"> 
      <span id="node002">这是第2结点div002</span> 
      <div id="003" style="border:1px solid red;width:50%;height:200px"> 
        <span id="node003">这是第3结点div003</span> 
      </div> 
      <div id="004" style="border:1px solid red;width:50%;height:200px"> 
        <span id="node003">这是第3结点div004</span> 
      </div> 
    </div> 
  </div> 
  <script> 
  function Get_srcElement(){ 
    var srcElement="" 
    srcElement = srcElement + " " + "event.srcElement.children[0].tagName: " + event.srcElement.children[0].tagName 
    srcElement = srcElement + " " + "event.srcElement.firstChild.id : " + event.srcElement.firstChild.id 
    srcElement = srcElement + " " + "event.srcElement.lastChild.id : " + event.srcElement.lastChild.id 
    alert(srcElement) 
  } 
  </script> 
</div>