Pregunta Obtener la ID del elemento que activó un evento


¿Hay alguna forma de obtener el ID del elemento que dispara un evento?

Estoy pensando algo así como:

<html>
  <head>
    <script type="text/javascript" src="starterkit/jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $("a").click(function () {
          var test = caller.id;
          alert(test.val());
        });
      });
    </script>
  </head>
  <body>
    <form class="item" id="aaa">
      <input class="title"></input>
    </form>
    <form class="item" id="bbb">
      <input class="title"></input>
    </form>
  </body>

</html>

Excepto, por supuesto, que la var test debe contener la identificación "aaa", si el evento se dispara desde la primera forma, y "bbb", si el evento se dispara desde la segunda forma.


833
2017-09-07 08:09


origen


Respuestas:


En jQuery event.target siempre se refiere al elemento que desencadenó el evento, donde 'event' es el parámetro pasado a la función. http://api.jquery.com/category/events/event-object/

$(document).ready(function() {
    $("a").click(function(event) {
        alert(event.target.id);
    });
});

Tenga en cuenta también que 'this' también funcionará, pero no es un objeto jQuery, por lo que si desea usar una función jQuery, debe referirse a ella como '$(this)', p.ej.:

$(document).ready(function() {
    $("a").click(function(event) {
        // this.append wouldn't work
        $(this).append(" Clicked");
    });
});

1138
2017-09-07 19:02



Como referencia, prueba esto! ¡Funciona!

jQuery("classNameofDiv").click(function() {
    var contentPanelId = jQuery(this).attr("id");
    alert(contentPanelId);
});

147
2017-09-02 08:01



Aunque se menciona en otras publicaciones, quería deletrear esto:

$(event.target).id es indefinido

$(event.target)[0].id da el atributo id.

event.target.id también da el atributo id.

this.id da el atributo id.

y

$(this).id es indefinido.

Las diferencias, por supuesto, están entre los objetos jQuery y los objetos DOM. "id" es una propiedad DOM, por lo que debe estar en el objeto elemento DOM para usarlo.

(Me hizo tropezar, por lo que probablemente tropezó con alguien más)


78
2017-11-06 13:38



Para todos los eventos, no se limita a jQuery, puede usar

var target = event.target || event.srcElement;
var id = target.id

Dónde event.target falla, vuelve a caer event.srcElement para IE. Para aclarar el código anterior, no es necesario jQuery, pero también funciona con jQuery.


69
2017-07-19 14:23



Puedes usar (this) para hacer referencia al objeto que disparó la función.

'this' es un DOM elemento cuando se está dentro de una función de devolución de llamada (en el contexto de jQuery), por ejemplo, se llama mediante los métodos click, each, bind, etc.

Aquí es donde puedes aprender más: http://remysharp.com/2007/04/12/jquerys-this-demystified/


58
2017-09-07 08:12



Genero una tabla dinámicamente fuera de una base de datos, recibo los datos en JSON y los pongo en una tabla. Cada fila de la mesa tiene un único ID, que es necesario para otras acciones, por lo tanto, si se modifica el DOM, se necesita un enfoque diferente:

$("table").delegate("tr", "click", function() {
   var id=$(this).attr('id');
   alert("ID:"+id);  
});

25
2017-09-12 14:14



Elemento que disparó el evento que tenemos en evento propiedad

event.currentTarget

Obtenemos Nodo DOM objeto en el que se estableció el controlador de eventos.


La mayoría del nodo anidado que comenzó el proceso de burbujeo que tenemos en

event.target

El objeto de evento siempre es el primer atributo del controlador de eventos, por ejemplo:

document.querySelector("someSelector").addEventListener(function(event){

 console.log(event.target);
 console.log(event.currentTarget);

});

Más sobre la delegación de eventos Puedes leer en http://maciejsikora.com/standard-events-vs-event-delegation/


14
2017-10-14 13:04



El elemento de origen como un objeto jQuery se debe obtener a través de

var $el = $(event.target);

Esto le proporciona la fuente del clic, en lugar del elemento al que también se le asignó la función de clic. Puede ser útil cuando el evento click está en un objeto principal Por ejemplo, haga clic en un evento en una fila de la tabla y necesita la celda en la que se hizo clic

$("tr").click(function(event){
    var $td = $(event.target);
});

10
2018-03-22 15:41