Propagation :
Pour tout comprendre de la propagation des événements ( voir article ).Récupérer la valeur d'un input
text.addEventListener('input', function(evt)
{
document.querySelector('#i').textContent = `input : ${this.value}`;
});
text.addEventListener('change', function(evt)
{
document.querySelector('#c').textContent = `change : ${this.value}`;
});
text.addEventListener('blur', function(evt)
{
document.querySelector('#b').textContent = `blur : ${this.value}`;
});
Une dizaine d'écritures d'un même code
voir code : →Différentes écritures de codeEvent
Récupérer les coordonnées de la souris !
function relativePos(evt) {
let rect = evt.target.getBoundingClientRect(); // donne la hauteur, largeur, top, left ... d'un element !
return {
x: Math.floor(evt.clientX - rect.left),
y: Math.floor(evt.clientY - rect.top)
}; // objet avec deux propriétés
}
document.body.addEventListener("click", function(e){
let T = e.target.tagName;
console.log(` click sur ${T}`);
let P = relativePos(e);
console.log(` x = ${P.x} et y = ${P.y}` );
if (P.x<330 && P.x>200 && P.y<330 && P.y>200)
document.querySelector("#corps").innerText = "le Coeur";
if (P.x<300 && P.x>180 && P.y<200 && P.y>50)
document.querySelector("#corps").innerText = "la tête";
},false);
remarque :
// on peut utiliser la décomposition !
let {x,y} = relativePos(e);
console.log(` x = ${x} et y = ${y}` );
→ Test en position absolute