Beispiel:JS-DOM-Tut-5c.html
Aus SELFHTML-Wiki
<!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">
<title>Event.target</title>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {
document.body.addEventListener('click', event => {
if (event.target.nodeName == 'BUTTON') {
console.log('geklickt: ', event.target.textContent);
document.querySelector('output').innerText += event.target.textContent;
}
});
});
</script>
<style>
button {
}
button#space {
width: 15em;
}
kbd {
background: #f9f9f9 linear-gradient(to bottom, #eee, #f9f9f9, #eee) repeat scroll 0 0;
border: thin solid #aaa;
border-radius: 2px;
box-shadow: 1px 2px 2px #ddd;
font-family: inherit;
font-size: 0.9em;
padding: 0 0.5em;
}
</style>
</head>
<body>
<h1>Events - wo wurde ausgelöst?</h1>
<p><output></output></p>
<p>
<button>Q</button>
<button>W</button>
<button>E</button>
<button>R</button>
<button>T</button>
<button>Z</button>
<button>U</button>
<button>I</button>
<button>O</button>
<button>P</button>
</p>
<p>
<button>A</button>
<button>S</button>
<button>D</button>
<button>F</button>
<button>G</button>
<button>H</button>
<button>J</button>
<button>K</button>
<button>L</button>
</p>
<p>
<button>Y</button>
<button>X</button>
<button>C</button>
<button>C</button>
<button>V</button>
<button>B</button>
<button>N</button>
<button>M</button>
</p>
<p>
<button id="space"> </button>
</p>
<p>Geben Sie Ihren Text ein.</p>
<p>Öffnen Sie die Konsole (<kbd>F12</kbd>) für weitere Informationen.</p>
</body>
</html>
