Définir onClick avec JavaScript
- Qu’est-ce qu’un événement et un EventListener en JavaScript
-
Comment ajouter un EventListener
onClickà un élément en JavaScript -
Comment passer une référence d’un élément à un EventListener
onClicken JavaScript -
Comment ajouter un EventListener
onClickà Jquery en JavaScript
Dans ce tutoriel, nous verrons comment attacher un écouteur onClick à un élément en utilisant JavaScript ; nous discuterons:
- Qu’est-ce qu’un événement et un EventListener ou un EventHandler en JavaScript
- Comment ajouter un EventListener
onClickà un élément - Comment passer une référence à un EventListener
onClick - Comment ajouter
onClickEventListener en utilisant Jquery
Qu’est-ce qu’un événement et un EventListener en JavaScript
Un événement est quelque chose que fait un navigateur ou un utilisateur final. Ces événements peuvent être gérés par un concept JavaScript appelé Event Handlers ou Event Listeners. Un écouteur d’événement est exécuté lorsqu’un événement particulier se produit.
onClick est l’un de ces écouteurs d’événement. Un écouteur d’événement onClick se déclenche/s’exécute lorsqu’un utilisateur clique sur un élément.
Comment ajouter un EventListener onClick à un élément en JavaScript
<!DOCTYPE html>
<html>
<body>
<div id="textElement" onclick="ChangeColor()">
Change Color to Red
</div>
<script>
function ChangeColor() {
document.getElementById("textElement").style.color = "red";
}
</script>
</body>
</html>
Le code ci-dessus déclencherait/exécuterait la méthode ChangeColor, qui accédera à l’élément, en utilisant le modèle d’objet Document, ayant un identifiant de textElement et en changeant la couleur de son texte en rouge.
Notez que le onClick est défini comme une propriété d’un élément en HTML similaire à class, id, etc.
Alternativement, vous pouvez définir l’attribut onClick d’un élément directement en utilisant JavaScript.
<!DOCTYPE html>
<html>
<body>
<div id="textElement">
Change Color to Red
</div>
<script>
document.getElementById("textElement").onclick = function() {
document.getElementById("textElement").style.color = "red";
};
</script>
</body>
</html>
Cela accédera au textElement et lui attribuera une fonction; cette fonction s’exécutera lorsque l’utilisateur cliquera sur l’élément HTML, le résultat sera similaire. Par exemple, la couleur de l’élément ayant un id de textElement serait changée en rouge.
De plus, vous pouvez utiliser la méthode/fonction addEventListener de l’élément JavaScript pour exécuter la même fonctionnalité.
<!DOCTYPE html>
<html>
<body>
<div id="textElement">
Change Color to Red
</div>
<script>
let element = document.getElementById("textElement");
element.addEventListener("click", function(){
element.style.color = "red";
});
</script>
</body>
</html>
Le addEventListener prend deux arguments ; le premier est le type d’événement à écouter sur un élément HTML, et le second est la fonction de rappel qui s’exécuterait lorsqu’un certain événement se produirait.
Si vous utilisez Internet Explorer, le addEventListener ne fonctionnera pas en raison de problèmes de compatibilité. Nous devrions utiliser une solution de secours en utilisant attachEvent pour reproduire ce comportement.
<!DOCTYPE html>
<html>
<body>
<div id="textElement">
Change Color to Red
</div>
<script>
let element = document.getElementById("textElement");
if(element.addEventListener){
element.addEventListener('click', function(){
element.style.color = "red";
});
}else if(element.attachEvent){
element.attachEvent('onclick', function(){
element.style.color = "red";
});
}
</script>
</body>
</html>
Comment passer une référence d’un élément à un EventListener onClick en JavaScript
<!DOCTYPE html>
<html>
<body>
<div id="textElement" onclick="ChangeColor(this,'red')">
Change Color to passed Color
</div>
<script>
function ChangeColor(element,color) {
element.style.color = color;
}
</script>
</body>
</html>
Dans l’exemple, nous passons deux arguments, this et red, this transmet une référence à un élément DOM à la fonction, alors que red n’est qu’une chaîne.
Vous pouvez remarquer qu’en changeant simplement le deuxième argument, nous pouvons changer la couleur de l’élément. Cette approche augmente la réutilisabilité par rapport à l’autre approche. Par exemple, nous pouvons utiliser la méthode ChangeColor avec plusieurs éléments.
<!DOCTYPE html>
<html>
<body>
<div id="textElement" onclick="ChangeColor(this,'red')">
Change Color to Red
</div>
<div id="textElement" onclick="ChangeColor(this,'blue')">
Change Color to Blue
</div>
<script>
function ChangeColor(element,color) {
element.style.color = color;
}
</script>
</body>
</html>
Comment ajouter un EventListener onClick à Jquery en JavaScript
Si vous n’utilisez pas Vanilla JavaScript mais utilisez quelque chose comme Jquery, une bibliothèque JavaScript, le processus est similaire ; la seule différence est la syntaxe.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#textElement").click(function(){
$(this).css('color','red')
});
});
</script>
</head>
<body>
<div id="textElement">Change Color to Red</p>
</body>
</html>
Il ajoutera un écouteur d’événement à l’élément ayant un id de textElement dès que le document se charge.