壹、Javascript event.srcElement
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("")這樣的功能,
經常有人問 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.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>
</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?style="border:10px?red?solid">
<input?type="button"?value="父元素標簽"?>
</div>
event.srcElement有關問題- -
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>