mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
187 lines
6.2 KiB
HTML
187 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Event Bubbling and Multiple Listeners</title>
|
|
</head>
|
|
<body>
|
|
<p>There are four lists listening to the mousedown event.</p>
|
|
<ul>
|
|
<li>The first list demonstrates standard event bubbling and multiple listeners.</li>
|
|
<li>The second list demonstrates stopPropagation()</li>
|
|
<li>The third list demonstrates stopImmediatePropagation()</li>
|
|
<li>The fourth list removes the second listener from within the first listener.</li>
|
|
</ul>
|
|
<p>For the test to pass, it must match the reference.</p>
|
|
<p>Only the first click counts. (I didn't want to figure out stopping multiple clicks)</p>
|
|
|
|
<h2>List One:</h2>
|
|
<h3>Result:</h3>
|
|
<div class="listener1">
|
|
<p></p>
|
|
<div class="listener1">
|
|
<p></p>
|
|
<p class="listener1" style="cursor: pointer;">
|
|
Click me!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<h3>Reference:</h3>
|
|
<div>
|
|
<p>3 (PASS)</p>
|
|
<p>2 (PASS)</p>
|
|
<p>1 (PASS)</p>
|
|
</div>
|
|
|
|
<h2>List Two:</h2>
|
|
<h3>Result:</h3>
|
|
<div class="listener2">
|
|
<p></p>
|
|
<div class="listener2">
|
|
<p></p>
|
|
<p class="listener2" style="cursor: pointer;">
|
|
Click me!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<h3>Reference:</h3>
|
|
<div>
|
|
<p>2 (PASS)</p>
|
|
<p>1 (PASS)</p>
|
|
</div>
|
|
|
|
<h2>List Three:</h2>
|
|
<p>(Test fails if FAIL is shown on screen)</p>
|
|
<h3>Result:</h3>
|
|
<div class="listener3">
|
|
<p></p>
|
|
<div class="listener3">
|
|
<p></p>
|
|
<p class="listener3" style="cursor: pointer;">
|
|
Click me!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<h3>Reference:</h3>
|
|
<div>
|
|
<p>1 (PASS)</p>
|
|
</div>
|
|
|
|
<h2>List Four:</h2>
|
|
<p>(Test fails if FAIL is shown on screen)</p>
|
|
<h3>Result:</h3>
|
|
<div class="listener4">
|
|
<p></p>
|
|
<div class="listener4">
|
|
<p></p>
|
|
<p class="listener4" style="cursor: pointer;">
|
|
Click me!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<h3>Reference:</h3>
|
|
<div>
|
|
<p>3 (PASS)</p>
|
|
<p>2 (PASS)</p>
|
|
<p>1 (PASS)</p>
|
|
</div>
|
|
|
|
<script>
|
|
let first_listener_count = 1;
|
|
let second_listener_count = 1;
|
|
let third_listener_count = 1;
|
|
let fourth_listener_count = 1;
|
|
|
|
function get_p_element_from_event(event) {
|
|
let result_p_element = event.currentTarget.firstElementChild;
|
|
|
|
if (!result_p_element) {
|
|
result_p_element = event.currentTarget;
|
|
}
|
|
|
|
return result_p_element;
|
|
}
|
|
|
|
function first_listener(event) {
|
|
let result_p_element = get_p_element_from_event(event);
|
|
|
|
result_p_element.innerText = first_listener_count;
|
|
first_listener_count++;
|
|
}
|
|
|
|
function second_listener(event) {
|
|
let result_p_element = get_p_element_from_event(event);
|
|
|
|
result_p_element.innerText = second_listener_count;
|
|
second_listener_count++;
|
|
|
|
if (second_listener_count == 3) {
|
|
event.stopPropagation();
|
|
second_listener_count = 1;
|
|
}
|
|
}
|
|
|
|
function third_listener(event) {
|
|
let result_p_element = get_p_element_from_event(event);
|
|
|
|
result_p_element.innerText = third_listener_count;
|
|
|
|
if (third_listener_count > 1) {
|
|
result_p_element.innerText += " (FAIL)";
|
|
} else {
|
|
result_p_element.innerText += " (PASS)";
|
|
}
|
|
|
|
third_listener_count++;
|
|
event.stopImmediatePropagation();
|
|
}
|
|
|
|
function fourth_listener(event) {
|
|
let result_p_element = get_p_element_from_event(event);
|
|
|
|
result_p_element.innerText = fourth_listener_count + " (PASS)";
|
|
fourth_listener_count++;
|
|
|
|
if (result_p_element.className == "listener4")
|
|
result_p_element.removeEventListener("mousedown", listener_fail);
|
|
else
|
|
result_p_element.parentNode.removeEventListener("mousedown", listener_fail);
|
|
}
|
|
|
|
function listener_pass(event) {
|
|
let result_p_element = get_p_element_from_event(event);
|
|
result_p_element.innerText += " (PASS)";
|
|
}
|
|
|
|
function listener_fail(event) {
|
|
let result_p_element = get_p_element_from_event(event);
|
|
result_p_element.innerText += " (FAIL)";
|
|
}
|
|
|
|
const first_listeners = document.querySelectorAll(".listener1");
|
|
const second_listeners = document.querySelectorAll(".listener2");
|
|
const third_listeners = document.querySelectorAll(".listener3");
|
|
const fourth_listeners = document.querySelectorAll(".listener4");
|
|
|
|
for (const element of first_listeners) {
|
|
element.addEventListener("mousedown", first_listener);
|
|
element.addEventListener("mousedown", listener_pass);
|
|
}
|
|
|
|
for (const element of second_listeners) {
|
|
element.addEventListener("mousedown", second_listener);
|
|
element.addEventListener("mousedown", listener_pass);
|
|
}
|
|
|
|
for (const element of third_listeners) {
|
|
element.addEventListener("mousedown", third_listener);
|
|
element.addEventListener("mousedown", listener_fail);
|
|
}
|
|
|
|
for (const element of fourth_listeners) {
|
|
element.addEventListener("mousedown", fourth_listener);
|
|
element.addEventListener("mousedown", listener_fail);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|