Get ID elementu, który wywołał funkcję

Jestem zaskoczony, że nikt nie wspomniał o użyciu this w obsłudze zdarzenia. 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 obsługi zdarzenia, możesz automatycznie przypisać wartość this obiektowi, który utworzył Zdarzenie.

Ponadto, Użytkownik programowo zainstalowanych programów obsługi zdarzeń pozwala oddzielić kod javascript od HTML, który jest często uważany za dobry rzecz.

Oto jak byś to zrobił w swoim kodzie w prostym javascript:

Usuń onmouseover="zoom()" z HTML i zainstaluj obsługę zdarzeń w javascript w następujący sposób:

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

Możesz użyć 'this' W Obsłudze zdarzenia:

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

Lub przekazać obiekt zdarzenia do obsługi w następujący sposób:

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

Do dołączania zdarzeń zaleca się użycie attachEvent(dla IE

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

Możesz zakodować konfigurację obsługi w następujący sposób:

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

Wtedy this w twoim programie obsługi będzie odnosić się do elementu. Oferuję zastrzeżenie, że nie jestem w 100% pewien, co się dzieje, gdy masz opiekuna w znaczniku <area>, głównie dlatego, że nie widziałem znacznika <area> od około dekady. Myślę, że to powinno dać ci znacznik obrazu, ale to może być złe.

edit - tak, jest źle-dostajesz znacznik <area>, a nie <img>. Więc musisz to odebrać. element macierzysty (Mapa), a następnie znaleźć obraz, który go używa (tj. <img>, którego atrybut "usemap" odnosi się do nazwy mapy).

edit again - tylko, że to nie ma znaczenia, ponieważ chcesz obszaru" id " durr. Przepraszam, że nie czytam poprawnie.

Wiem, że nie chcesz rozwiązania jQuery, ale włączenie javascript w HTML jest dużym Nie no.

Chodzi mi o to, że możesz to zrobić, ale jest wiele powodów, dla których nie powinieneś (przeczytaj dyskretny javascript, jeśli chcesz poznać szczegóły).

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

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

Główną zaletą jest to, że nie mieszasz kodu javascript z HTML. Co więcej, wystarczy napisać to tylko raz i będzie działać dla wszystkich tagi w przeciwieństwie do konieczności określania obsługi dla każdego z osobna.

Dodatkową korzyścią jest to, że każda obsługa jQuery otrzymuje obiekt event, który zawiera wiele przydatnych danych - takich jak Źródło zdarzenia, typ zdarzenia itd., co znacznie ułatwia pisanie kodu, którego szukasz.

Wreszcie, ponieważ jest to jQuery, nie musisz myśleć o rzeczach między przeglądarkami - duża korzyść, zwłaszcza gdy masz do czynienia z wydarzeniami.