diff --git a/Base/res/html/misc/event-bubbling-and-multiple-listeners.html b/Base/res/html/misc/event-bubbling-and-multiple-listeners.html
new file mode 100644
index 0000000000..4ef0bd68c6
--- /dev/null
+++ b/Base/res/html/misc/event-bubbling-and-multiple-listeners.html
@@ -0,0 +1,186 @@
+<!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>
diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html
index f11253496f..7232e383b7 100644
--- a/Base/res/html/misc/welcome.html
+++ b/Base/res/html/misc/welcome.html
@@ -35,6 +35,7 @@ span#loadtime {
     <p>This page loaded in <b><span id="loadtime"></span></b> ms</p>
     <p>Some small test pages:</p>
     <ul>
+        <li><a href="event-bubbling-and-multiple-listeners.html">event bubbling and multiple listeners</a></li>
         <li><a href="checkbox.html">checkbox</a></li>
         <li><a href="canvas-rotate.html">canvas rotate()</a></li>
         <li><a href="margin-collapse-2.html">margin collapsing 2</a></li>
