onClick mit JavaScript einstellen
- Was ist ein Event und EventListener in JavaScript
-
So fügen Sie einem Element in JavaScript einen
onClickEventListener hinzu -
Wie übergibt man einen Verweis auf ein Element an einen
onClickEventListener in JavaScript -
Wie man
onClickEventListener zu Jquery in JavaScript hinzufügt
In diesem Tutorial besprechen wir, wie man mit JavaScript einen onClick-Listener an ein Element anhängt; wir werden diskutieren:
- Was ist ein Event und EventListener oder EventHandler in JavaScript?
- Wie man einen
onClickEventListener zu einem Element hinzufügt - So übergeben Sie eine Referenz an einen
onClickEventListener - Wie man
onClickEventListener mit Jquery hinzufügt
Was ist ein Event und EventListener in JavaScript
Ein Ereignis ist etwas, das ein Browser oder ein Endbenutzer tut. Diese Ereignisse können durch ein JavaScript-Konzept namens Event Handler oder Event Listener behandelt werden. Ein Event Listener wird ausgeführt, wenn ein bestimmtes Ereignis eintritt.
onClick ist einer dieser Ereignis-Listener. Ein onClick-Ereignis-Listener wird ausgelöst/ausgeführt, wenn ein Benutzer auf ein Element klickt.
So fügen Sie einem Element in JavaScript einen onClick EventListener hinzu
<!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>
Der obige Code würde die Methode ChangeColor auslösen/ausführen, die unter Verwendung des Document-Objektmodells auf das Element zugreift, die ID textElement hat und seine Textfarbe in Rot ändert.
Beachten Sie, dass onClick als Eigenschaft eines Elements in HTML ähnlich wie class, id usw.
Alternativ können Sie das Attribut onClick eines Elements direkt per JavaScript setzen.
<!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>
Dies greift auf das textElement zu und weist ihm eine Funktion zu; diese Funktion wird ausgeführt, wenn der Benutzer auf das HTML-Element klickt, das Ergebnis ist ähnlich. Zum Beispiel würde die Farbe des Elements mit der id von textElement in Rot geändert.
Darüber hinaus können Sie die Methode/Funktion addEventListener des JavaScript-Elements verwenden, um dieselbe Funktionalität auszuführen.
<!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>
Der addEventListener benötigt zwei Argumente; der erste ist der Ereignistyp, auf den ein HTML-Element zu hören ist, und der zweite ist die Callback-Funktion, die ausgeführt wird, wenn ein bestimmtes Ereignis eintritt.
Wenn Sie den Internet Explorer verwenden, funktioniert der addEventListener aufgrund von Kompatibilitätsproblemen nicht. Um dieses Verhalten zu replizieren, müssten wir einen Fallback mit attachEvent verwenden.
<!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>
Wie übergibt man einen Verweis auf ein Element an einen onClick EventListener in 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>
Im Beispiel übergeben wir zwei Argumente, this und red, this übergibt eine Referenz auf ein DOM-Element an die Funktion, während red nur ein String ist.
Sie können feststellen, dass wir durch einfaches Ändern des zweiten Arguments die Farbe des Elements ändern können. Dieser Ansatz erhöht die Wiederverwendbarkeit im Vergleich zu dem anderen Ansatz. Zum Beispiel können wir die Methode ChangeColor mit mehreren Elementen verwenden.
<!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>
Wie man onClick EventListener zu Jquery in JavaScript hinzufügt
Wenn Sie kein Vanilla-JavaScript verwenden, sondern etwas wie Jquery, eine JavaScript-Bibliothek, ist der Vorgang ähnlich; der einzige Unterschied ist die Syntax.
<!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>
Es fügt dem Element mit der id von textElement einen Event-Listener hinzu, sobald das Dokument geladen wird.