Obtener ID del elemento que llamó a una función

Question

¿Cómo puedo obtener la ID de un elemento que llamó a una función JS?

body.jpg es una imagen de un perro mientras el usuario señala con su mouse la pantalla en diferentes partes del cuerpo, se muestra una imagen ampliada. El ID del elemento de área es idéntico al nombre de archivo de la imagen menos la carpeta y la extensión.

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

He hecho mi investigación y he llegado a SO como último recurso. Prefiero una solución que no involucre jQuery.

Answer 1

pasar una referencia al elemento en la función cuando se le llama:

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

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

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

Answer 2

Puede codificar la configuración del gestor de la siguiente manera:

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

Entonces this en el controlador se referirá a la elemento. Ahora, ofreceré la advertencia de que no estoy 100% seguro de qué sucede cuando tienes un controlador en una etiqueta <area>, en gran parte porque no he visto una etiqueta <area> en aproximadamente una década. Creo que debería darle la etiqueta de imagen, pero podría ser incorrecta.

edición — sí, está mal - se obtiene la etiqueta <area>, no el <img>. Por lo tanto, tendrá que obtener el elemento primario de ese elemento (el mapa) y luego buscar la imagen que lo está usando (es decir, el <img> cuyo atributo "usemap" hace referencia al nombre del mapa).

editar nuevamente — excepto que no importa porque usted quiere la zona de "id" Durr. Perdón por no leer correctamente.

Answer 3

Sé que no desea una solución jQuery, pero incluir javascript dentro de HTML es un gran no, no.

Quiero decir que puedes hacerlo, pero hay muchas razones por las que no deberías (lee el javascript no intrusivo si quieres los detalles).

lo tanto, en el interés de otras personas que pueden ver esta pregunta, aquí está la solución de jQuery:

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

El mayor beneficio es no mezclar código javascript con HTML. Además, solo necesita escribir esto una vez y funcionará para todas las etiquetas en lugar de tener que especificar el controlador para cada una por separado.

El beneficio adicional es que cada controlador de jQuery recibe un objeto de evento que contiene una gran cantidad de datos útiles, como el origen del evento, tipo de evento, etc., lo que hace mucho más fácil escribir el tipo de código que está después.

Por último, ya que es jQuery no necesita pensar en cosas de navegador cruzado, una gran ventaja, especialmente cuando se trata de eventos.

Answer 4

Me sorprende que nadie haya mencionado el uso de this en el controlador de eventos. Funciona automáticamente en navegadores modernos y puede funcionar en otros navegadores.Si usa addEventListener o attachEvent para instalar su controlador de eventos, puede hacer que el valor de this se asigne automáticamente al objeto creado.

Además, el usuario de controladores de eventos instalados mediante programación le permite separar el código JavaScript de HTML, que a menudo se considera una buena opción.

Así es como usted haría que, en su código en javascript claro:

Retire la onmouseover="zoom()" de su HTML e instalar el controlador de eventos en su javascript de esta manera:

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

puede utilizar 'este 'en el controlador de eventos:

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

o pasar objeto de evento al controlador de la siguiente manera: 0

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

Se recomienda utilizar attachEvent (para IE < 9)/addEventListener (IE9 y otros navegadores) para adjuntar eventos. El ejemplo anterior es por brevedad.

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