event.srcElement 用法筆記e.target

2019-11-21 00:53:50

字體：大中小

供稿：網(wǎng)友

注意獲取的標記都以大寫表示，如"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從字面上可以看出來有以下關(guān)鍵字：事件,源他的意思就是：當前事件的源，
我們可以調(diào)用他的各種屬性就像:document.getElementById("")這樣的功能，
經(jīng)常有人問 firefox 下的 event.srcElement 怎么用，在此詳細說明：
IE下,event對象有srcElement屬性,但是沒有target屬性;Firefox下,event對象有target屬性,但是沒有srcElement屬性.但他們的作用是相當?shù)模矗?
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.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結(jié)點div001<span> 
<div id="002" style="border:1px solid red;width:80%;height:300px"> <span id="node002">這是第2結(jié)點div002<span> 
<div id="003" style="border:1px solid red;width:50%;height:200px"> <span id="node003">這是第3結(jié)點div003<span> 
</div> 
<div id="004" style="border:1px solid red;width:50%;height:200px"> <span id="node003">這是第3結(jié)點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> 

<div style="border:10px red solid"> 
<input type="button" value="父元素標簽" > 
</div> 

event.srcElement有關(guān)問題- -
event.srcElement的子標簽和父標簽:
第一個子標簽為
event.srcElement.firstChild
最后個一個是
event.srcElement.lastChild
當然也可以用
event.srcElement.children[i]
event.srcElement.ChildNode[i]
至于event.srcElement.parentElement是指在鼠標所在對象的上一個對象．
<input type=button value=GO title="?page=1">
<script language="JavaScript">
function f()
{
alert('index.asp'+event.srcElement.title)
location.href='index.asp'+event.srcElement.title
}
</script>
<a title="a測試" >a測試</a>
<br>
<table border=1 width="200">
<tr title="tr測試" ><td>tr</td></tr>
</table>
<table border=1 width="200">
<tr><td title="td測試" >td</td></tr>
</table>
<select >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
代碼參考：
//m.survivalescaperooms.com/article/566.htm

上一篇：javascript 導出數(shù)據(jù)到Excel(處理table中的元素)

下一篇：javascript獲得光標所在的文本框(text/textarea)中的位置