blob: d26f8d5245512ec8d6a783a4d395ab35706d6026 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", function() {
alert("It loaded!");
document.getElementById("my_div").addEventListener("mousedown", function() {
alert("Mouse down!");
});
document.getElementById("my_div").addEventListener("mousemove", function() {
alert("Mouse move!");
});
});
</script>
</head>
<body>
<div id="my_div">Hello there!</div>
<div style="border: 1px solid black; width: 500px; height: 200px" id="divel">
CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK
ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME
CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME
</div>
<p id="result">This text should be green, whether you click on the div border or the div text.</p>
<p>
<script>
const divel = document.getElementById("divel");
const result = document.getElementById("result");
divel.addEventListener("click", event => {
try {
const text = `Result: Clicked on divel element with id ${event.target.getAttribute(
"id"
)}`;
console.log(text);
result.innerText = text;
result.style.setProperty("color", "green");
} catch (e) {
const text = `Result: ${e.message}`;
console.error(text);
result.innerText = text;
result.style.setProperty("color", "red");
}
});
</script>
</p>
</body>
</html>
|
