関数を呼び出した要素のIDを取得する

Question

JS関数を呼び出した要素のIDを取得するにはどうすればよいですか？

body.jpgは、体の様々な部分でユーザがマウスを画面上に向けたときの犬の画像で、拡大画像が表示されます。 area要素のIDは、イメージファイル名からフォルダと拡張子を差し引いたものと同じです。

<div> 
    <img src="images/body.jpg" usemap="#anatomy"/> 
</div> 

<map name="anatomy"> 
    <area id="nose" shape="rect" coords="280,240,330,275" onmouseover="zoom()"/> 
</map> 

<script type="text/javascript"> 
function zoom() 
{ 
document.getElementById("preview").src="images/nose.jpg"; 
} 
</script> 

<div> 
<img id="preview"/> 
</div> 

私は自分の研究を行い、最後の手段として是非お越しください。私はjQueryを含まないソリューションを好む。

Answer 1

、それが呼び出されたときに、関数に要素への参照を渡します

<area id="nose" onmouseover="zoom(this);" /> 

<script> 
    function zoom(ele) { 
    var id = ele.id; 

    console.log('area element id = ' + id); 
    } 
</script> 

Answer 2

をあなたはこのようなハンドラのセットアップをコーディングすることができます

<area id="nose" shape="rect" coords="280,240,330,275" onmouseover="zoom.call(this)"/> 

その後、あなたのハンドラでthisが参照します素子。ここでは、<area>タグでハンドラを取得したときに何が起こるかを100％確信していないという注意点を提示します。これは、十年ほどの間に<area>タグが見られなかったためです。私はだと思います。イメージタグを付けるべきですが、それは間違っている可能性があります。

編集 —はい、それは間違っている - あなたは<area>タグ、ない<img>を取得します。したがって、その要素の親（マップ）を取得し、それを使用している画像（つまり、「usemap」属性がマップの名前を参照する<img>）を見つけなければなりません。

編集再び —あなたはエリアの「ID」デュールをしたいので、それは問題ではない点が異なります。申し訳ありませんが正しく読んでいない。

Answer 3

私はあなたがjQueryソリューションを望んでいないことを知っていますが、HTMLの中にjavascriptを含めても大きな問題はありません。

私はあなたがそれを行うことができますが、あなたは（あなたが詳細をしたい場合は控えめなjavascriptの上に読んで）てはならない理由がたくさんあるわけ。

だから、この質問を見て、他の人の利益のために、ここではjQueryのソリューションは、次のとおりです。

$(document).ready(function() { 
    $('area').mouseover(function(event) { 
    $('#preview').attr('src', 'images/' + $(event.srcElement).attr('id')); 
    }); 
}); 

主な利点は、あなたがHTMLとJavaScriptコードを混在させないでくださいです。さらに、これは一度だけ書く必要があり、ハンドラを個別に指定する必要がなく、すべてのタグに対して機能します。

その他の利点は、イベントのソース、イベントのタイプなど、多くの有用なデータを含むイベントオブジェクトをすべてのjQueryハンドラが受け取ることです。後に。

最後に、jQueryのため、ブラウザ間の関係について考える必要はありません。特に、イベントを扱う際の大きなメリットです。

Answer 4

私は誰もが、イベントハンドラでthisの使用を言及していないことを驚いています。最新のブラウザでは自動的に動作し、他のブラウザでも動作させることができます。addEventListenerまたはattachEventを使用してイベントハンドラをインストールする場合、作成されたイベントに自動的にthisの値を割り当てることができます。

さらに、プログラムでインストールされたイベントハンドラのユーザーは、JavaScriptコードをHTMLから分離することができます。これは、しばしば良いことと考えられます。ここで

あなたは、プレーンJavaScriptで、あなたのコードであることをするだろう方法は次のとおりです。

あなたのHTMLからonmouseover="zoom()"を削除し、このようなあなたのJavaScriptでイベントハンドラをインストールします。

// simplified utility function to register an event handler cross-browser 
function setEventHandler(obj, name, fn) { 
    if (typeof obj == "string") { 
     obj = document.getElementById(obj); 
    } 
    if (obj.addEventListener) { 
     return(obj.addEventListener(name, fn)); 
    } else if (obj.attachEvent) { 
     return(obj.attachEvent("on" + name, function() {return(fn.call(obj));})); 
    } 
} 

function zoom() { 
    // you can use "this" here to refer to the object that caused the event 
    // this here will refer to the calling object (which in this case is the <map>) 
    console.log(this.id); 
    document.getElementById("preview").src="http://photos.smugmug.com/photos/344290962_h6JjS-Ti.jpg"; 
} 

// register your event handler 
setEventHandler("nose", "mouseover", zoom); 

Answer 5

あなたは「これを使用することができます'イベントハンドラに次のように

document.getElementById("preview").onmouseover = function() { 
    alert(this.id); 
} 

またはハンドラにイベントオブジェクトを渡します

document.getElementById("preview").onmouseover = function(evt) { 
    alert(evt.target.id); 
} 

イベントを添付するには、attachEvent（IE < 9）/ addEventListener（IE9などのブラウザ）を使用することをお勧めします。上記の例は、簡潔にするためのものです。

function myHandler(evt) { 
    alert(evt.target.id); 
} 

var el = document.getElementById("preview"); 
if (el.addEventListener){ 
    el.addEventListener('click', myHandler, false); 
} else if (el.attachEvent){ 
    el.attachEvent('onclick', myHandler); 
}