論文

JSのevent.srcElementとevent.target



Event Srcelement Event



JSのevent.srcElementはIEで使用され、event.targetは非IEで使用されます。

event.srcElementは、現在のイベントが作用するオブジェクトをキャプチャできます。たとえば、event.srcElement.tagNameは、アクティブなタグ名をキャプチャします。



取得したタグはすべて大文字であることに注意してください。たとえば、「TD」、「TR」、「A」などです。

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) }

event.srcElementは、文字通り次のキーワードで表示できます：event、source、つまり：現在のイベントのソース。 document.getElementById（ ''）など、彼のさまざまなプロパティを呼び出すことができます。



IEでは、イベントオブジェクトにはsrcElement属性がありますが、Firefoxではターゲット属性がありません。イベントオブジェクトにはtarget属性がありますが、srcElement属性はありません。しかし、それらの役割は非常に重要です。つまり、firefoxの下のevent.target = IEの下のイベントです。 srcElement。 （回避策：var obj = event.srcElement？event.srcElement：event.target）

IEでは、mouseoverイベントが発生すると、e.srcElementはmouse-input要素を取得でき、e.fromElementはマウスの移動元の要素を取得できます。e.toElementは、mouseoutイベントが発生したときのe.srcElement、e.srcElementです。 e.fromElementとe.srcElementが同じである場合、マウスを削除した要素を取得できます。e.toElementは、マウスを現在の要素に移動させることができます。

DOMでは、mouseoverおよびmouseoutで発生する要素には、e.targetを介してアクセスできます。関連する要素には、e.relatedTargetを介してアクセスします（e.fromElementは、マウスオーバーのIEに相当し、e.e。マウスアウトのIEに相当します）。 toElement）。



以下は、メニューリストで使用されるプログラムです。

1 2 3 4 5

以下はいくつかの一般的な状況です（IEでテストされています。firefoxでevent.targetをテストする場合は、コードを変更して保存し、firefoxでテストを開くことができます）。

event.srcElement.Xは、コントロールのさまざまなプロパティを表示します

This is the first node div001 This is the second node div002 This is the third node div003 This is the 3rd node div004 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) }

event.srcElement.selectedIndexは通常、選択したオブジェクトで使用されます。

 function tdclick(){ if(event.srcElement.tagName.toLowerCase()=='td') Alert('Line:'+(event.srcElement.parentNode.rowIndex+1)+'column:'+(event.srcElement.cellIndex+1)) }

最初のサブタグは次のとおりです：event.srcElement.firstChild
最後のものは：event.srcElement.lastChild
もちろん、次を使用することもできます：event.srcElement.children [i] event.srcElement.ChildNode [i]
event.srcElement.parentElementは、マウスが配置されているオブジェクトの最後のオブジェクトです。

$('childItems').onmouseover=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').onmouseout=function(e){ e=e||window.event vartarget=e.target||e.srcElement varrelatedTarget=e.relatedTarget||e.toElement If(!$(relatedTarget).descendantOf(this)&&$(relatedTarget)!=this){//if relatedTarget is not ul itself or is not a child of ul close() } }