2.1 KiB
title | localeTitle |
---|---|
Onclick Event | Evento Onclick |
Evento Onclick
O evento onclick
em JavaScript permite que você, como programador, execute uma função quando um elemento é clicado.
Exemplo
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
alert('Button was clicked!');
}
</script>
No exemplo simples acima, quando um usuário clica no botão, ele verá um alerta no navegador, mostrando que o Button was clicked!
.
Adicionando onclick
dinamicamente
O evento onclick
também pode ser adicionado programaticamente a qualquer elemento usando o código a seguir no exemplo a seguir:
<p id="foo">click on this element.</p>
<script>
var p = document.getElementById("foo"); // Find the paragraph element in the page
p.onclick = showAlert; // Add onclick function to element
function showAlert(event) {
alert("onclick Event triggered!");
}
</script>
Nota
É importante notar que usando o onclick podemos adicionar apenas uma função de ouvinte. Se você quiser adicionar mais, apenas use addEventListener (), que é a maneira preferida para adicionar listener de eventos.
No exemplo acima, quando um usuário clica no elemento de paragraph
no html
, ele verá um alerta mostrando o onclick Event triggered
.
Impedindo a ação padrão
No entanto, se anexarmos onclick
a links ( a
tag do HTML), poderemos impedir que a ação padrão ocorra:
<a href="https://guide.freecodecamp.org" onclick="myAlert()">Guides</a>
<script>
function myAlert(event) {
event.preventDefault();
alert("Link was clicked but page was not open");
}
</script>
No exemplo acima, event.preventDefault()
comportamento padrão de a
elemento (link de abertura) usando event.preventDefault()
dentro de nossa função de retorno de chamada onclick
.