javascript - una - Obtención del ID del elemento que activó un evento.
pasar parametros javascript onclick (18)
A pesar de que se menciona en otras publicaciones, quería explicar esto:
$(event.target).id no está definido
$(event.target)[0].id proporciona el atributo id.
event.target.id también proporciona el atributo id.
this.id da el atributo id.
y
$(this).id no está definido.
Las diferencias, por supuesto, están entre los objetos jQuery y los objetos DOM. "id" es una propiedad de DOM, por lo que debe estar en el objeto de elemento DOM para usarla.
(Me hizo tropezar, así que probablemente tropezó con alguien más)
¿Hay alguna manera de obtener el ID del elemento que dispara un evento?
Estoy pensando algo 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 test var debe contener el ID "aaa" , si el evento se activa desde el primer formulario, y "bbb" , si el evento se activa desde el segundo formulario.
Ambos de estos trabajos,
jQuery(this).attr("id");
y
alert(this.id);
El elemento fuente 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 que también se asignó a la función de clic. Puede ser útil cuando el evento de clic está en un objeto principal, por ejemplo, un evento de clic en una fila de la tabla y necesita la celda en la que se hizo clic
$("tr").click(function(event){
var $td = $(event.target);
});
Elemento que encendió el evento que tenemos en la propiedad del evento.
event.currentTarget
Obtenemos el objeto nodo DOM en el que se configuró el controlador de eventos.
Nodo más anidado que comenzó el proceso de propagación que tenemos en
event.target
El objeto de evento siempre es el primer atributo del controlador de eventos, ejemplo:
document.querySelector("someSelector").addEventListener(function(event){
console.log(event.target);
console.log(event.currentTarget);
});
Más información sobre la delegación de eventos Puede leer en http://maciejsikora.com/standard-events-vs-event-delegation/
En el caso de manejadores de eventos delegados, donde podría tener algo como esto:
<ul>
<li data-id="1">
<span>Item 1</span>
</li>
<li data-id="2">
<span>Item 2</span>
</li>
<li data-id="3">
<span>Item 3</span>
</li>
<li data-id="4">
<span>Item 4</span>
</li>
<li data-id="5">
<span>Item 5</span>
</li>
</ul>
y su código JS como tal:
$(document).ready(function() {
$(''ul'').on(''click li'', function(event) {
var $target = $(event.target),
itemId = $target.data(''id'');
//do something with itemId
});
});
Es muy probable que encuentre que itemId undefined está undefined , ya que el contenido de la LI está envuelto en un <span> , lo que significa que el <span> probablemente será el objetivo del evento. Puedes sortear esto con un cheque pequeño, así:
$(document).ready(function() {
$(''ul'').on(''click li'', function(event) {
var $target = $(event.target).is(''li'') ? $(event.target) : $(event.target).closest(''li''),
itemId = $target.data(''id'');
//do something with itemId
});
});
O, si prefiere maximizar la legibilidad (y también evitar la repetición innecesaria de llamadas de ajuste de jQuery):
$(document).ready(function() {
$(''ul'').on(''click li'', function(event) {
var $target = $(event.target),
itemId;
$target = $target.is(''li'') ? $target : $target.closest(''li'');
itemId = $target.data(''id'');
//do something with itemId
});
});
Cuando se utiliza la delegación de eventos, el método .is() es invaluable para verificar que su objetivo del evento (entre otras cosas) es realmente lo que necesita que sea. Use .closest(selector) para buscar el árbol DOM, y use .find(selector) (generalmente asociado con .first() , como en .find(selector).first() ) para buscarlo. No es necesario usar .first() cuando se usa .closest() , ya que solo devuelve el primer elemento ancestral coincidente, mientras que .find() devuelve todos los descendientes coincidentes.
En jQuery event.target siempre se refiere al elemento que activó 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 que no es un objeto jQuery, por lo que si desea usar una función jQuery en él, debe referirse a él como ''$(this)'' , por ejemplo:
$(document).ready(function() {
$("a").click(function(event) {
// this.append wouldn''t work
$(this).append(" Clicked");
});
});
Esto funciona en un z-index más alto que el parámetro de evento mencionado en las respuestas anteriores:
$("#mydiv li").click(function(){
ClickedElement = this.id;
alert(ClickedElement);
});
De esta manera, siempre obtendrá el id del elemento (en este ejemplo li ). También cuando se hace clic en un elemento secundario del padre ..
Genero una tabla dinámicamente a partir de una base de datos, recibo los datos en JSON y los coloco en una tabla. Cada fila de la tabla tiene un ID único, que se necesita para acciones adicionales, por lo tanto, si se modifica el DOM, necesita un enfoque diferente:
$("table").delegate("tr", "click", function() {
var id=$(this).attr(''id'');
alert("ID:"+id);
});
Para referencia, prueba esto! ¡Funciona!
jQuery("classNameofDiv").click(function() {
var contentPanelId = jQuery(this).attr("id");
alert(contentPanelId);
});
Para todos los eventos, no solo limitado a jQuery puede usar
var target = event.target || event.srcElement;
var id = target.id
Donde event.target falla, se vuelve atrás en event.srcElement para IE. Para aclarar que el código anterior no requiere jQuery, también funciona con jQuery.
Puede usar (this) para hacer referencia al objeto que activó la función.
''this'' es un elemento DOM cuando se encuentra dentro de una función de devolución de llamada (en el contexto de jQuery), por ejemplo, al ser llamado por los métodos click, each, bind, etc.
Aquí es donde puede obtener más información: http://remysharp.com/2007/04/12/jquerys-this-demystified/
Puede usar la función para obtener el ID y el valor del elemento modificado (en mi ejemplo, he usado una etiqueta Seleccionar).
$(''select'').change(
function() {
var val = this.value;
var id = jQuery(this).attr("id");
console.log("value changed" + String(val)+String(id));
}
);
Puedes intentar usar:
$(''*'').live(''click'', function() {
console.log(this.id);
return false;
});
Solo usa this referencia
$(this).attr("id")
o
$(this).prop("id")
Use can Use .on event
$("table").on("tr", "click", function() {
var id=$(this).attr(''id'');
alert("ID:"+id);
});
esto funciona con la mayoría de los tipos de elementos:
$(''selector'').on(''click'',function(e){
log(event.currentTarget.id);
});
this.element.attr("id") funciona bien en IE8.
var buttons = document.getElementsByTagName(''button'');
var buttonsLength = buttons.length;
for (var i = 0; i < buttonsLength; i++){
buttons[i].addEventListener(''click'', clickResponse, false);
};
function clickResponse(){
// do something based on button selection here...
alert(this.id);
}
Trabajando JSFiddle here .