Nun werden wir uns mit Mouse-Events in der Web-Interaktion befassen. Das Mouse-Event ist ein spezielles Event, das durch das Aktivieren bestimmter Mausfunktionen ausgelöst wird. Ein typisches Beispiel ist das Anzeigen einer Benachrichtigung, wenn der Mauszeiger über ein bestimmtes Element bewegt wird. In dieser Anwendung wird eine Warnmeldung angezeigt, wenn der Mauszeiger über das rot eingefärbte Div-Element bewegt wird.
<!DOCTYPE html>
<html>
<head>
<title>Mouse Event Handling</title>
<style>
#hoverable {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="hoverable"></div>
<script>
const hoverable = document.getElementById("hoverable");
hoverable.addEventListener("mouseover", function() {
alert("Mauszeiger ist über dem Div!");
});
</script>
</body>
</html>