どうすればonclick関数がjavascriptと呼ばれるのかを取得する

Question

誰でも私にどこでonclickイベントが呼び出されたかを決める方法を教えてくれますか？

私はonclickのは

元から来た場所に応じてH4内容を変更したいです。 label（）が「織物バッジ」で呼び出された場合、h4 innerhtmlは「織りバッジ」 「織りテープ」でlabel（）が呼び出された場合、h4 innerhtmlは「織りテープ」となります

これを組み込みたい実際には以下のjavascriptで現在行っているカテゴリごとに1つの関数を作成するのではなく、それが条件の場合にどのように作成できますか？

function label() 
{ document.getElementsByTagName("h4")[0].innerHTML="badges";} 


<ul class="overview"> 

<li><img src="images/UniwinNav.jpg" align="texttop"/><a href=""><div class="listlabel">Woven Labels</div></a></li> 

<li><img src="images/UniwinNav.jpg" align="texttop"/><a href="#" onClick='label()'><div class="listlabel">Woven Badges</div></a></li> 

<li><img src="images/UniwinNav.jpg" align="texttop"/><a href=""><div class="listlabel">Woven Tapes</div></a></li> 
<li><img src="images/UniwinNav.jpg" align="texttop"/><a href=""><div class="listlabel">Woven WaistBands</div></a></li> 


<h4>Product Specification</h4> 


     </ul> 

Answer 1

に「DIV」要素を追加してはいけません。イベントを開始した要素への参照です。最初の子要素の内部HTMLをつかんで、簡単に目的の文字列を見つけることができます。

<script type="text/javascript"> 
function label(element) { 
    document.getElementsByTagName("h4")[0].innerHTML=element.firstChild.innerHTML; 
    return false; 
} 
</script> 

<ul class="overview"> 

<li><img src="images/UniwinNav.jpg" align="texttop" /><a href="#" onclick="return label(this)"><div class="listlabel">Woven Labels</div></a></li> 
<li><img src="images/UniwinNav.jpg" align="texttop" /><a href="#" onclick="return label(this)"><div class="listlabel">Woven Badges</div></a></li> 
<li><img src="images/UniwinNav.jpg" align="texttop" /><a href="#" onclick="return label(this)"><div class="listlabel">Woven Tapes</div></a></li> 
<li><img src="images/UniwinNav.jpg" align="texttop" /><a href="#" onclick="return label(this)"><div class="listlabel">Woven WaistBands</div></a></li> 

<h4>Product Specification</h4> 

label()関数に戻り値を追加し、要素がクリックされたときにそれを返すことは良い考えであることに注意してください。これにより、デフォルトのブラウザアクションがキャンセルされます。つまり、あなたの場所に厄介な#文字が表示されません。

Answer 2

パラメータを追加すると、label（）が呼び出されたときにソースが渡されます。以下のように文字列を渡すこともできますし、アンカーそのものを渡してjqueryで変更している子供を見つけることもできます。 jQueryを使う必要はありませんが、私はあなたに以下の例を示したいと思います。

function label(source){ 
    $(source).find('h4').html('badges'); 
}; 

<a href... onClick='label(this)'> 

Answer 3

ジャスト機能ラベルにパラメータを追加します。

label(type) 

し、HTMLには、タイプ定義：

<a href="#" onClick="label('badges')">Woven Badges</a> 
<a href="#" onClick="label('tapes')">Woven tapes</a> 

そして、あなたの機能ラベルでは、各タイプの治療を行います。

PS：あなただけlabel()関数の引数としてthisを渡す「」要素

Answer 4

あなたはどんなイベントハンドラでもコンテキスト - thisを持っています。そのイベントに関連付けられている要素にバインドされています。

function my_handler(elem) { 
    elem.href // contains href of anchor, eg '#Woven_WaistBands' 
} 

<li><img src="images/UniwinNav.jpg" align="texttop"/><a href="#Woven_Tapes" onclick="my_handler(this); return false;"><span class="listlabel">Woven Tapes</span></a></li> 
<li><img src="images/UniwinNav.jpg" align="texttop"/><a href="#Woven_WaistBands" onclick="my_handler(this); return false;"><span class="listlabel">Woven WaistBands</span></a></li> 

<h4 id="Woven_Tapes">blah blah</h4> 
<h4 id="Woven_WaistBands">...</h4> 

をしかし、あなたの自己を繰り返し、jQueryのまたはネイティブaddEventListenetを（それが今理由IEのためにあまり移植性のある方法である）を使用して、イベントにハンドラをバインドしない方がよい：だから、あなたはこのようになめらかに行うことができます。