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>
<h1>Event.target()</h1>

<main>
  <h2>Überschrift</h2>
  <p>Bewegen Sie die Maus über die Seite, bzw. …<br> Klicken Sie irgendwo auf die Seite. Es wird dann angezeigt, welches Element das Event ausgelöst hat.</p>
  
  <div></div>
  <ul>
    <li>Pizza</li>
    <li>Pasta</li>
    <li>Prosciutto</li>            
  </ul>
  <ol>
    <li>Pizza</li>
    <li>Pasta</li>
    <li>Prosciutto</li>   
  </ol>
  <p>Event ausgelöst durch: <span id="ereignis">-</span></p>
  <footer>made by <a href="https://selfhtml.org/">Selfhtml</a></footer>
</main>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-event-target.html&oldid=58238“