Ce que tous les développeurs web connaissent, ce sont les événements du DOM, les clics de souris, les survol, les chargements de page. Soit la page HTML suivante, un formulaire avec une div cachée qui se révèle dès que le formulaire change
<body>
<style>
#popup {
border: black 1px solid;
width: 50%;
height: 10vh;
border-radius: 5px;
margin: 10px;
display: none;
}
</style>
<form action="#" id="formulaire">
<label for="email">Email</label>
<input type="text" id="email"><br>
<label for="name">Name</label>
<input type="text" id="name"><br>
<input type="submit" value="Send">
</form>
<div id="popup">
<h1>Form filled !</h1>
</div>
</body>
let email = document.querySelector('#email')
let name = document.querySelector('#name')
let formulaire = document.querySelector('#formulaire')
let popup = document.querySelector('#popup')
formulaire.addEventListener('change', (e) => {
console.log('form has changed')
popup.style.display = 'block'
})
Mais il est aussi possible de lancer des événement depuis n’importe quel objet en Javascript, et ceci va nous permettre de coder notre application avec des événements, permettant une grande souplesse et découplage.
Par exemple, imaginez un formulaire avec login et mot de passe, di les deux champs sont validés, nous voulion faire apparaitre une popup.
let email = document.querySelector('#email')
let name = document.querySelector('#name')
let formulaire = document.querySelector('#formulaire')
let popup = document.querySelector('#popup')
popup.addEventListener('formEvent', (e) => {
popup.style.display = 'block'
})
//create the CustomEvent
const formEvent = new CustomEvent('formEvent', { detail: "les détails" })
formulaire.addEventListener('change', (e) => {
console.log('form has changed')
popup.dispatchEvent(formEvent)
// popup.style.display = 'block'
})
Il faut mettre bubble à true pour que l’événement se propage
let email = document.querySelector('#email')
let name = document.querySelector('#name')
let formulaire = document.querySelector('#formulaire')
let popup = document.querySelector('#popup')
popup.addEventListener('formEvent', (e) => {
popup.style.display = 'block'
})
//create the CustomEvent
const formEvent = new CustomEvent('formEvent', { detail: "les détails",bubbles:true })
formulaire.addEventListener('change', (e) => {
console.log('form has changed')
popup.dispatchEvent(formEvent)
// popup.style.display = 'block'
})