Obtendo o ID do elemento que disparou um evento
https://stackoverflow.com/questions/48239
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Existe alguma maneira de obter o ID do elemento que dispara um evento?
Estou pensando em 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>
Exceto, é claro, que o var test deve conter o id "aaa", se o evento for disparado a partir do primeiro formulário, e "bbb", se o evento for disparado do segundo formulário.
Solução
Em jQuery event.target sempre se refere ao elemento que desencadeou o evento, onde event é o parâmetro passado para a função. http://api.jquery.com/category/events/event-object/
$(document).ready(function() {
$("a").click(function(event) {
alert(event.target.id);
});
});
Observe também que this também funcionará, mas não é um objeto jQuery, então se você deseja usar uma função jQuery nele, você deve se referir a ele como $(this), por exemplo.:
$(document).ready(function() {
$("a").click(function(event) {
// this.append wouldn't work
$(this).append(" Clicked");
});
});
Outras dicas
Para referência, tente isso!Funciona!
jQuery("classNameofDiv").click(function() {
var contentPanelId = jQuery(this).attr("id");
alert(contentPanelId);
});
Embora seja mencionado em outras postagens, eu queria esclarecer isso:
$(event.target).id é indefinido
$(event.target)[0].id fornece o atributo id.
event.target.id também fornece o atributo id.
this.id fornece o atributo id.
e
$(this).id é indefinido.
As diferenças, é claro, estão entre objetos jQuery e objetos DOM."id" é uma propriedade DOM, então você precisa estar no objeto do elemento DOM para usá-lo.
(Isso me fez tropeçar, então provavelmente tropeçou em outra pessoa)
Para todos os eventos, não limitado apenas ao jQuery, você pode usar
var target = event.target || event.srcElement;
var id = target.id
Onde event.target falha, ele recorre event.srcElement para IE.Para esclarecer o código acima não requer jQuery, mas também funciona com jQuery.
Você pode usar (this) para fazer referência ao objeto que disparou a função.
'this' é um DOM elemento quando você está dentro de uma função de callback (no contexto do jQuery), por exemplo, sendo chamado pelo click, each, bind, etc.métodos.
Aqui é onde você pode aprender mais: http://remysharp.com/2007/04/12/jquerys-this-demystified/
Eu gero uma tabela dinamicamente em um banco de dados, recebo os dados em JSON e coloco em uma tabela.Cada linha da tabela tem um único ID, que é necessário para ações futuras, portanto, se o DOM for alterado, você precisará de uma abordagem diferente:
$("table").delegate("tr", "click", function() {
var id=$(this).attr('id');
alert("ID:"+id);
});
Elemento que disparou o evento que temos em evento propriedade
event.currentTarget
Nós temos Nó DOM objeto no qual foi definido o manipulador de eventos.
A maioria dos nós aninhados que iniciaram o processo de borbulhamento que temos em
event.target
O objeto de evento é sempre o primeiro atributo do manipulador de eventos, exemplo:
document.querySelector("someSelector").addEventListener(function(event){
console.log(event.target);
console.log(event.currentTarget);
});
Mais sobre delegação de eventos Você pode ler em http://maciejsikora.com/standard-events-vs-event-delegation/
O elemento de origem como um objeto jQuery deve ser obtido via
var $el = $(event.target);
Isso fornece a origem do clique, em vez do elemento ao qual a função de clique também foi atribuída.Pode ser útil quando o evento de clique está em um objeto pai, por exemplo, um evento de clique em uma linha de tabela e você precisa da célula que foi clicada
$("tr").click(function(event){
var $td = $(event.target);
});
Você pode tentar usar:
$('*').live('click', function() {
console.log(this.id);
return false;
});
No caso de manipuladores de eventos delegados, onde você pode ter algo assim:
<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>
e seu código JS assim:
$(document).ready(function() {
$('ul').on('click li', function(event) {
var $target = $(event.target),
itemId = $target.data('id');
//do something with itemId
});
});
É mais do que provável que você descubra que itemId é undefined, já que o conteúdo do LI está envolto em um <span>, o que significa o <span> provavelmente será o alvo do evento.Você pode contornar isso com um pequeno cheque, assim:
$(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
});
});
Ou, se você preferir maximizar a legibilidade (e também evitar repetições desnecessárias de chamadas de empacotamento do 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
});
});
Ao usar a delegação de eventos, o .is() O método é inestimável para verificar se o destino do seu evento (entre outras coisas) é realmente o que você precisa que seja.Usar .closest(selector) para pesquisar a árvore DOM e usar .find(selector) (geralmente juntamente com .first(), como em .find(selector).first()) para pesquisá-lo.Você não precisa usar .first() ao usar .closest(), pois retorna apenas o primeiro elemento ancestral correspondente, enquanto .find() retorna todos os descendentes correspondentes.
Use pode usar o evento .on
$("table").on("tr", "click", function() {
var id=$(this).attr('id');
alert("ID:"+id);
});
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);
}
Trabalhando JSFiddle aqui.
Isso funciona em um nível mais alto z-index do que o parâmetro de evento mencionado nas respostas acima:
$("#mydiv li").click(function(){
ClickedElement = this.id;
alert(ClickedElement);
});
Dessa forma você sempre obterá o id do (neste exemplo li) elemento.Além disso, quando clicado em um elemento filho do pai.
this.element.attr("id") funciona bem no IE8.
Ambos funcionam,
jQuery(this).attr("id");
e
alert(this.id);
Basta usar o this referência
$(this).attr("id")
ou
$(this).prop("id")
Você pode usar a função para obter o ID e o valor do item alterado (no meu exemplo, usei uma tag Select.
$('select').change(
function() {
var val = this.value;
var id = jQuery(this).attr("id");
console.log("value changed" + String(val)+String(id));
}
);
isso funciona com a maioria dos tipos de elementos:
$('selector').on('click',function(e){
log(event.currentTarget.id);
});
estou trabalhando com
preenchimento automático jQuery
Eu tentei procurar um event conforme descrito acima, mas quando a função de solicitação é acionada, ela não parece estar disponível.eu usei this.element.attr("id") para obter o ID do elemento e parece funcionar bem.
No caso do Angular 7.x você pode obter o elemento nativo e seu id ou propriedades.
myClickHandler($event) {
this.selectedElement = <Element>$event.target;
console.log(this.selectedElement.id)
this.selectedElement.classList.remove('some-class');
}
HTML:
<div class="list-item" (click)="myClickHandler($event)">...</div>
