quiz/js: add describe event capturing js question (#462)

packages/quiz/questions/describe-event-capturing/en-US.mdx

@@ -0,0 +1,86 @@
+---
+title: Describe event capturing
+---
+
+**TL;DR**
+
+Event capturing is a lesser-used counterpart to event bubbling in the DOM event propagation mechanism. It follows the opposite order, where an event triggers first on the ancestor element and then travels down to the target element. Event capturing is rarely used as compared to Event bubbling, but it can be used in specific scenarios where you need to intercept events at a higher level before they reach the target element.
+
+---
+
+## What is Event capturing?
+
+Event capturing is a propagation mechanism in the DOM (Document Object Model) where an event, such as a click or a keyboard event, is first triggered at the root of the document and then flows down through the DOM tree to the target element.
+
+Capturing has a higher priority than bubbling, meaning that capturing event handlers are executed before bubbling event handlers, as shown by the phases of event propagation:
+
+- Capturing phase: The event moves down towards the target element
+- Target phase: The event reaches the target element
+- Bubbling phase: The event bubbles up from the target element
+
+## Capturing phase
+
+During the capturing phase, the event starts at the document root and propagates down to the target element. Any event listeners on ancestor elements in this path will be triggered before the target element's handler. But note that event capturing can't happen until the third argument of `addEventListener()` is set to the `Boolean` value of `true` as shown below (default value is `false`).
+
+Here's an example using modern ES6 syntax to demonstrate event capturing:
+
+```js
+// HTML:
+// <div id="parent">
+//   <button id="child">Click me!</button>
+// </div>
+
+const parent = document.getElementById('parent');
+const child = document.getElementById('child');
+
+parent.addEventListener(
+  'click',
+  () => {
+    console.log('Parent element clicked (capturing)');
+  },
+  true,
+); // Set third argument to true for capturing
+
+child.addEventListener('click', () => {
+  console.log('Child element clicked');
+});
+```
+
+When you click the "Click me!" button, it will trigger the parent element's capturing handler first, followed by the child element's handler.
+
+## Stopping propagation
+
+Event propagation can be stopped during the capturing phase using the `stopPropagation()` method. This prevents the event from traveling further down the DOM tree.
+
+```js
+// HTML:
+// <div id="parent">
+//   <button id="child">Click me!</button>
+// </div>
+
+const parent = document.getElementById('parent');
+const child = document.getElementById('child');
+
+parent.addEventListener(
+  'click',
+  (event) => {
+    console.log('Parent element clicked (capturing)');
+    event.stopPropagation(); // Stop event propagation
+  },
+  true,
+);
+
+child.addEventListener('click', () => {
+  console.log('Child element clicked');
+});
+```
+
+Now, as a result of stopping event propagation, just the `parent` event listener will now be called when you click the "Click Me!" button, and the `child` event listener will never be called because the event propagation has stopped at the `parent` element.
+
+Event capturing is rarely used as compared to Event bubbling, but it can be used in specific scenarios where you need to intercept events at a higher level before they reach the target element.
+
+## Further reading
+
+- [Event Capturing | MDN](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_capture)
+- [Bubbling and Capturing | JavaScript.info](https://javascript.info/bubbling-and-capturing)
+- [W3C DOM Level 3 Events Specification](https://www.w3.org/TR/DOM-Level-3-Events/#event-flow)

packages/quiz/questions/describe-event-capturing/metadata.json

@@ -0,0 +1,11 @@
+{
+  "slug": "describe-event-capturing",
+  "languages": [],
+  "companies": [],
+  "premium": false,
+  "duration": 5,
+  "published": true,
+  "topics": ["javascript", "html"],
+  "importance": "high",
+  "difficulty": "medium"
+}