HTML utilizado na aula
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trabalhando com Eventos</title>
<script src="./index.js" defer></script>
</head>
<body>
<h1>Trabalhando com Eventos no Javascript</h1>
<hr>
<h2>Registre-se!</h2>
<section>
<label for="username">Nome de Usuário:</label>
<input type="text" name="username" id="username">
<br>
<label for="password">Senha:</label>
<input type="password" name="password" id="password">
<br>
<label for="passwordConfirmation">Confirme sua senha:</label>
<input type="password" name="passwordConfirmation" id="passwordConfirmation">
<br>
<button id="register-button">Registrar</button>
<button onclick="removeEvent()">Remover Event Listener</button>
</section>
</body>
</html>
Javascript utilizado na aula
function register(ev) {
console.log(ev)
const sectionElement = ev.currentTarget.parentNode
const username = sectionElement.children.username.value
const password = sectionElement.children.password.value
const passwordConfirmation = sectionElement.children.passwordConfirmation.value
if (password === passwordConfirmation) {
alert("Usuário " + username + " registrado!")
} else {
alert("As senhas não conferem")
}
}
function removeEvent() {
button.removeEventListener("click", register)
alert("Event Removed")
}
const button = document.getElementById("register-button")
button.addEventListener("click", register)
button.addEventListener("mouseover", function (ev) {
console.log(ev)
})