event.srcElement　说明　方法　技巧

转载

mb64e87c41793c3 2023-08-28 14:23:59

文章标签 Firefox IE 结点 firefox 控件 文章分类 Python 后端开发

event.srcElement从字面上可以看出来有以下关键字：事件,源他的意思就是：当前事件的源，

我们可以调用他的各种属性就像:document.getElementById("")这样的功能，

经常有人问 firefox 下的 event.srcElement 怎么用，在此详细说明：

IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的，即：

firefox 下的 event.target = IE 下的 event.srcElement

解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.

以下是几种常见到的情况(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" 
   onclick 
  ="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" 
   onchange 
  ="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　说明　方法　技巧_IE

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

<   div    onclick 
  ="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 
  >