Às vezes, um desenvolvedor precisa saber o ID do botão no qual o usuário clicou para decidir o curso de ação em uma página da web. Como você verá neste artigo, isso pode ser feito através do JavaScript vanilla e do jQuery. Então, vamos começar:
Primeiro, vamos criar uma página HTML simples que tem dois botões no centro da página:
DOCTYPE html >
< html >
< corpo >
< Centro >
< div estilo = 'margem superior: 50px;' >
< h2 > Clique em um dos seguintes botões h2 >
< botão Eu iria = 'button_one' estilo = 'largura: 100px; altura:40px; margem direita: 10px;' > 1 botão >
< botão Eu iria = 'botão_dois' estilo = 'largura: 100px; altura:40px;' > dois botão >
div >
Centro >
corpo >
html >
Como obter o ID do botão clicado usando JavaScript?
Podemos obter o ID do botão clicado usando JavaScript em vários métodos diferentes. Em nosso primeiro método, obteremos a lista de nós de todas as tags de botão e as armazenaremos dentro de uma variável. Em seguida, vamos iterar sobre a lista de nós para obter o ID do botão que foi clicado:
< roteiro >
botões var = document.getElementsByTagName ( 'botão' ) ;
por ( deixar índice = 0 ; índice < botões.comprimento; índice++ ) {
botões [ índice ] .onclick = função ( ) {
alerta ( this.id ) ;
}
}
roteiro >
Também podemos configurar cada botão com ao clicar evento individualmente:
DOCTYPE html >
< html >
< corpo >
< Centro >
< div estilo = 'margem superior: 50px;' >
< h2 > Clique em um dos seguintes botões h2 >
< botão Eu iria = 'button_one' estilo = 'largura: 100px; altura:40px; margem direita: 10px;' ao clicar = 'alertId(this.id)' > 1 botão >
< botão Eu iria = 'botão_dois' estilo = 'largura: 100px; altura:40px;' ao clicar = 'alertId(this.id)' > dois botão >
div >
Centro >
corpo >
< roteiro >
função alertaId ( Eu iria ) {
alerta ( Eu iria )
}
roteiro >
html >
Como obter o ID do botão clicado usando jQuery?
jQuery também tem vários métodos diferentes que podem ser usados para obter o ID de um botão clicado. Começaremos com o clique() método que é aplicado em um seletor e recebe um nome de função como argumento opcional:
DOCTYPE html >
< html >
< corpo >
< Centro >
< div estilo = 'margem superior: 50px;' >
< h2 > Clique em um dos seguintes botões h2 >
< botão Eu iria = 'button_one' estilo = 'largura: 100px; altura:40px; margem direita: 10px;' ao clicar = 'alertId(this.id)' > 1 botão >
< botão Eu iria = 'botão_dois' estilo = 'largura: 100px; altura:40px;' ao clicar = 'alertId(this.id)' > dois botão >
div >
Centro >
corpo >
< roteiro >
$ ( 'botão' ) .clique ( alertaId ( $ ( isto ) .attr ( 'Eu iria' ) ) ) ;
função alertaId ( Eu iria ) {
alerta ( Eu iria )
}
roteiro >
html >
Também podemos usar o sobre() método para anexar manipuladores de eventos a elementos. o sobre() O método recebe pelo menos um evento como argumento junto com alguns outros argumentos opcionais:
< html >
< corpo >
< Centro >
< div estilo = 'margem superior: 50px;' >
< h2 > Clique em um dos seguintes botões h2 >
< botão Eu iria = 'button_one' estilo = 'largura: 100px; altura:40px; margem direita: 10px;' ao clicar = 'alertId(this.id)' > 1 botão >
< botão Eu iria = 'botão_dois' estilo = 'largura: 100px; altura:40px;' ao clicar = 'alertId(this.id)' > dois botão >
div >
Centro >
corpo >
< roteiro >
$ ( 'botão' ) .sobre ( 'clique' , ID de alerta ( $ ( isto ) .attr ( 'Eu iria' ) ) ) ;
função alertaId ( Eu iria ) {
alerta ( Eu iria )
}
roteiro >
html >
Conclusão
O ID de um botão clicado pode ser acessado por meio de JavaScript simples e jQuery. Discutimos quatro desses métodos e fornecemos detalhes detalhados e exemplos relevantes neste artigo.