當前位置:編程學習大全網 - 編程語言 - js中event.srcElement和event.target的區別

js中event.srcElement和event.target的區別

壹、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>

  • 上一篇:求華中數控編程指令 只要代碼和意思就行了 謝謝
  • 下一篇:北大青鳥java培訓:微服務系統架構的發展趨勢?
  • copyright 2024編程學習大全網