ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-10-05 13:51:50 +02:00
parent 6c4bc185b3
commit 7ba49fc673
2 changed files with 197 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
03_js-dom/unterricht/tag21/04_event-mouse-pointer/index.html
+136
View File
@@ -0,0 +1,136 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Events - MouseEvent | PointerEvent</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
.box {
background-color: tomato;
padding: 2rem;
display: block;
width: 200px;
}
.box .inner {
background-color: orange;
color: white;
display: inline-block;
padding: 0.5rem;
}
.content-box {
cursor: none !important;
width: 600px;
height: 250px;
border: 5px solid #ccc;
margin: 2rem;
position: relative;
}
.mouse-follower {
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border-radius: 50%;
background-color: tomato;
position: absolute;
top: 0;
left: 0;
user-select: none;
pointer-events: none;
}
</style>
</head>
<body>
<main>
<div class="container py-5">
<h1>Events - MouseEvent | PointerEvent</h1>
<p><a href="https://developer.mozilla.org/de/docs/Web/API/Document_Object_Model/Events">Standard Events</a></p>
<p><a href="https://www.w3schools.com/jsref/dom_obj_event.asp">JS Events in W3Schools</a></p>
<hr />
<!-- .mb-3>img[src="https://dummyimage.com/600x300/f90/fff.jpg"].img-thumbnail -->
<div class="mb-3"><img src="https://dummyimage.com/600x300/f90/fff.jpg" alt="" class="img-thumbnail" /></div>
<!-- button.btn.btn-primary.button-click.mb-3>span{Klick Mich} -->
<button class="btn btn-primary button-click mb-3" type="button"><span>Klick Mich</span></button>
<!-- .box>span.inner{Content} -->
<div class="box"><span class="inner">Content</span></div>
<div class="content-box">
<div class="mouse-follower"></div>
</div>
</div>
</main>
<script>
'use strict';
const $ = (qs) => document.querySelector(qs);
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
// PointerEvent - click - Ereignis wird ausgelöst, wenn der Anwender auf ein Element klickt.
$('.button-click').addEventListener('click', (e) => {
console.log('PointerEvent: ', e);
console.log('CLICK');
console.log('e.target: ', e.target); // verschachtelte angeklickte Element
// BITTE BEI POINTER/MOUSEEVENT e.currentTarget VERWENDEN!!
console.log('e.currentTarget: ', e.currentTarget); // gibt das Element zurück, worauf der Ereignis-Lauscher angelegt wurde.
});
// PointerEvent - dblclick - Ereignis wird ausgelöst, wenn der Anwender auf ein Element doppelt klickt.
$('.button-click').addEventListener('dblclick', (e) => {
console.log('PointerEvent: ', e);
console.log('DOUBLE_CLICK');
});
// MouseEvent - mouseenter - Ereignis wird ausgelöst, wenn der Benutzer über ein Element fährt. (einmalig)
$('img').addEventListener('mouseenter', (e) => {
console.log('MouseEvent: ', e);
console.log('MOUSE_ENTER');
});
// MouseEvent - mouseleave - Ereignis wird ausgelöst, wenn der Benutzer ein Element verlässt. (einmalig)
$('img').addEventListener('mouseenter', (e) => {
console.log('MouseEvent: ', e);
console.log('MOUSE_LEAVE');
});
// MouseEvent - mouseover - Ereignis wird ausgelöst, wenn der Benutzer über ein Element oder ein verschachteltes Element fährt. (mehrfach)
$('.box').addEventListener('mouseover', (e) => {
console.log('MouseEvent: ', e);
console.log('MOUSE_OVER');
});
// MouseEvent - mouseout - Ereignis wird ausgelöst, wenn der Benutzer ein Element oder ein verschachteltes Element verlässt. (mehrfach)
$('.box').addEventListener('mouseout', (e) => {
console.log('MouseEvent: ', e);
console.log('MOUSE_OUT');
});
$('.content-box').addEventListener('mousemove', (e) => {
console.log('MouseEvent: ', e);
console.log('MOUSE_MOVE');
console.log('screenX: ', e.screenX, 'clientX:', e.clientX, 'offsetX: ', e.offsetX);
console.log('screenY: ', e.screenY, 'clientY:', e.clientY, 'offsetY: ', e.offsetY);
$('.mouse-follower').style.top = `${e.offsetY}px`;
$('.mouse-follower').style.left = `${e.offsetX}px`;
});
$('.content-box').addEventListener('mousedown', (e) => {
console.log('MouseEvent: ', e);
console.log('MOUSE_DOWN');
});
$('.content-box').addEventListener('mouseup', (e) => {
console.log('MouseEvent: ', e);
console.log('MOUSE_UP');
});
</script>
</body>
</html>
03_js-dom/unterricht/tag21/05_event-keyboard/index.html
+61
View File
@@ -0,0 +1,61 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Events - KeyboardEvent | InputEvent | FocusEvent</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<h1>Events - KeyboardEvent | InputEvent | FocusEvent</h1>
<p><a href="https://developer.mozilla.org/de/docs/Web/API/Document_Object_Model/Events">Standard Events</a></p>
<p><a href="https://www.w3schools.com/jsref/dom_obj_event.asp">JS Events in W3Schools</a></p>
<hr />
<!-- .member-search.my-3>label.form-label+input:search.form-control#input-search.input-search -->
<div class="member-search my-3">
<label for="input-search" class="form-label">Suchfeld</label>
<input type="search" name="" id="input-search" class="form-control input-search" />
</div>
<!-- .percent-scale.mb-3>label.form-label{Regler}+input:range#input-range.form-range.input-range -->
<div class="percent-scale mb-3">
<label for="input-range" class="form-label">Regler</label>
<input
type="range"
name="percent"
min="0"
max="100"
value="0"
id="input-range"
class="form-range input-range" />
</div>
<!-- .country-selection.mb-3>label.form-label{Select Country}+select#select-country.select-country.form-select>option*4 -->
<div class="country-selection mb-3">
<label for="select-country" class="form-label">Select Country</label>
<select name="country" id="select-country" class="select-country form-select">
<option value="de">Deutschland</option>
<option value="es">Spanien</option>
<option value="fr">Frankreich</option>
<option value="it">Italien</option>
</select>
</div>
<div class="checkbox mb-3">
<input type="checkbox" name="agb" id="cb-agb" />
<label for="cb-agb" class="form-check-label">AGB akzeptieren</label>
</div>
</div>
</main>
<script>
'use strict';
const $ = (qs) => document.querySelector(qs);
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
// KeyboardEvent ============================
</script>
</body>
</html>