Beispiel:JS-DOM-Tut-5a.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">  
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {
   let text = '';
 
  document.querySelector('#button').addEventListener('mousedown', event => {
    if (event.button == 0) {
      text = 'Sie haben den linken Mausbutton gedrückt!';
    } else if (event.button == 1) {
      text = 'Sie haben den mittleren Mausbutton gedrückt!';
    } else if (event.button == 2) {
      text = 'Sie haben den rechten Mausbutton gedrückt!';
    }
		document.querySelector('output').innerText = text;
		console.log(text);
  });
 
});
 
</script>  
<title>Auf Events reagieren - 2</title>
</head>
 
<body>
  <h1>Auf Events reagieren - 2</h1>

  <p><output></output> &nbsp;</p> 
  <button id="button">Drück mich!</button>

</body>
</html>