Beispiel:JS-event-target.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head>

 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
 <title>Event.target</title>
 <style>
   div {
     width: 20em;
     height: 10em;
     float: right;
     background-color: #fffbf0; border: 2px dotted #e7c157; 
   }
   #ereignis {
     color: #c32e04;
     font-weight: bold;
     padding: 0.2em 1em;	
     background-color: #fffbf0; border: 2px dotted #e7c157; 
   }
   main {
     position: relative;  //für footer
   }
   footer {
     text-align: right;
     position: absolute;
     bottom: 1em;
     width: 90%;
   }
 </style>   
 <script async>
   'use strict';
   document.addEventListener('DOMContentLoaded', function () {
     function findeAuslöser(event) { 
       var elem = event.target,
           name = elem.nodeName;	  
       document.getElementById('ereignis').textContent = name;
     }
     var seite = document.documentElement;
     seite.addEventListener('mouseover',findeAuslöser);
     seite.addEventListener('click',findeAuslöser);	
   });
 </script>

</head>

<body>

Event.target()

<main>

Überschrift

Bewegen Sie die Maus über die Seite, bzw. …
Klicken Sie irgendwo auf die Seite. Es wird dann angezeigt, welches Element das Event ausgelöst hat.

  • Pizza
  • Pasta
  • Prosciutto
  1. Pizza
  2. Pasta
  3. Prosciutto

Event ausgelöst durch: -

 <footer>made by <a href="https://selfhtml.org/">Selfhtml</a></footer>

</main>

</body> </html>