javascript - usar - scrolltop jquery ejemplos

Javascript haga clic en el controlador de eventos: ¿cómo obtengo la referencia al elemento seleccionado?

Question

Mi HTML:

<div id="x" onclick="clickHandler(event)">
<div id="button1">This turns green</div>
<div id="button2">This turns blue</div>
</div>

Así que, en primer lugar, ¿por qué se supone que debo pasar "evento" al controlador de clics y es algún tipo de palabra clave del sistema? Además, dado que el controlador de clic se identifica en la división de contenedor, ¿cómo puedo saber en qué botón se ha hecho clic?

Answer 1

¿Por qué no puedes hacer esto?

<div id="x">
<div id="button1" onclick="clickHandler1()">This turns green</div>
<div id="button2" onclick="clickHandler2()">This turns blue</div>
</div>

Answer 2

Por lo general, solo nombro el elemento en el que se hace clic en la lista de argumentos de la llamada al controlador de clic, algo como (sin probar) esto:

<div id="x">
<div id="button1" onclick="handle_click_event( this, ''green'' )">This turns green</div>
<div id="button2" onclick="handle_click_event( this, ''blue'' )">This turns blue</div>
</div>
function handle_click_event ( obj, new_color ) {
obj.style.backgroundColor = new_color;
}

¿Podría ese enfoque trabajar para usted?

Answer 3

event es un objeto de evento que se crea automáticamente cuando se dispara un evento. Tenga en cuenta que no tiene que llamarlo event (tiendo a llamarlo simplemente e ). Ese objeto de evento tiene una serie de propiedades que describen el evento que representa. En este caso, el que le interesa sería target , que muestra el elemento que fue la fuente del evento:

function clickHandler(e) {
var target = e.target;
}

Aquí hay un ejemplo de trabajo .

Desafortunadamente, nunca es tan simple. Mientras que la especificación dice que debería ser event.target , a Internet Explorer le gusta ser diferente, y elige usar event.srcElement , por lo que es probable que desee verificarlo para asegurarse de que event.target existe. Por ejemplo:

function clickHandler(e) {
var target = (e.target) ? e.target : e.srcElement;
}