Uzyskaj identyfikator elementu, który wywołał funkcję

Question

Jak mogę uzyskać identyfikator elementu, który wywołał funkcję JS?

body.jpg to obraz psa, gdy użytkownik wskazuje jego/jej mysz na ekranie w różnych częściach ciała, pokazany jest powiększony obraz. Identyfikator elementu obszaru jest identyczny jak nazwa pliku obrazu minus folder i rozszerzenie.

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

Zrobiłem moje badania i doszedłem do SO w ostateczności. Preferuję rozwiązanie, które nie obejmuje jQuery.

Answer 1

Przepuścić odwołanie do elementu do funkcji, gdy to się nazywa:

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

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

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

Answer 2

można kodować konfigurację procedury obsługi takiego:

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

Następnie this w przewodnika będzie odnosić się do element. Teraz oferuję zastrzeżenie, że nie jestem w 100% pewny, co się stanie, gdy masz handler'a w tagu <area>, głównie dlatego, że nie widziałem tagu <area> w ciągu dekady. I think powinien dać ci tag obrazu, ale to może być złe.

edit — tak, to nie tak - masz tag <area>, a nie <img>. Musisz więc pobrać element macierzysty tego elementu (mapę), a następnie znaleźć obraz, który go używa (tj. <img>, którego atrybut "usemap" odnosi się do nazwy mapy).

edycja ponownie — oprócz niego nie ma znaczenia, ponieważ chcą „id” Dürr w okolicy. Przepraszam, że nie czytałem poprawnie.

Answer 3

Wiem, że nie chcesz rozwiązania jQuery, ale włączenie javascript wewnątrz HTML jest duże, nie, nie.

To znaczy, że możesz to zrobić, ale istnieje wiele powodów, dla których nie powinieneś (czytaj na dyskretnym javascriptu, jeśli chcesz poznać szczegóły).

Więc w interesie innych osób, które mogą zobaczyć to pytanie, o to rozwiązanie jQuery:

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

Główną korzyścią jest to, że nie mieszać kod JavaScript z HTML. Co więcej, wystarczy napisać to tylko raz i będzie działać dla wszystkich znaczników, a nie dla ręcznego określania obsługi dla każdego osobno.

Dodatkową korzyścią jest to, że każdy moduł obsługi jQuery otrzymuje obiekt zdarzenia, który zawiera wiele użytecznych danych - takich jak źródło zdarzenia, typ wydarzenia itd., Co znacznie ułatwia pisanie tego rodzaju kodu po.

Wreszcie, ponieważ jest to jQuery, nie trzeba myśleć o rzeczach związanych z różnymi przeglądarkami - co jest główną zaletą szczególnie w przypadku zdarzeń.

Answer 4

Jestem zaskoczony, że nikt nie wspomniał o użyciu this w module obsługi zdarzeń. Działa automatycznie w nowoczesnych przeglądarkach i może działać w innych przeglądarkach.Jeśli użyjesz addEventListener lub attachEvent do zainstalowania procedury obsługi zdarzeń, możesz automatycznie ustawić wartość this na obiekcie, który utworzył zdarzenie.

Co więcej, użytkownik programowo zainstalowanych programów obsługi zdarzeń umożliwia oddzielenie kodu javascript od HTML, co często jest uważane za dobre.

Oto jak można to zrobić w kodzie w zwykły javascript:

Zdjąć onmouseover="zoom()" z kodu HTML i zainstalować obsługi zdarzeń w JavaScript jak poniżej:

// 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

Można wykorzystać „to "w obsługi zdarzeń:

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

albo przekazać obiekt zdarzenia do obsługi następująco:

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

Zaleca się używanie attachEvent (dla IE < 9)/addEventListener (IE9 i innych przeglądarek) do dołączania zdarzeń. Przykład powyżej jest dla zwięzłości.

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