2a:null 2b:["$","title",null,{"children":"JavaScript Events | Steve Oney | Observable"}] 30:Tbce,md` ## Common Event Types There are [too many events to cover completely](https://developer.mozilla.org/en-US/docs/Web/Events). However, here are some of the most common and important events: - Common Mouse Events: - Clicking events: - [\`"click"\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event): a mouse click - [\`"dblclick"\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event): a mouse double click - [\`"mousedown"\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousedown_event): the a mouse button is pressed down - [\`"mouseup"\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseup): a mouse button is released - Movement events: - [\`"mousemove"\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event): the mouse moves - [\`"mouseover"\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event): the mouse moved over an element or one of its descendants - [\`"mouseout"\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event): the mouse left an element or one of its descendants - [\`"mouseenter"\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event): the mouse entered an element (unlike \`mouseover\`, this does not fire when the mouse hovers over the element's descendants) - [\`"mouseleave"\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event): when the mouse leaves a given element (the opposite of \`mouseenter\`) - Common Keyboard Events: - [\`"keydown"\`](https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event): a keyboard key was pressed down - [\`"keyup"\`](https://developer.mozilla.org/en-US/docs/Web/API/Document/keyup_event): a keyboard key was released - Touchscreen events (only work on devices with touchscreens) - [\`"touchstart"\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchstart_event): the user pressed a finger down - [\`"touchmove"\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchmove_event): the user's finger moved - [\`"touchend"\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchend_event): the user's finger left the touchscreen - Other events: - [\`"load"\`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload): a resource has loaded (for example, an \`\` element's \`src\` data was fetched or a \`window\`'s DOM has finished loading) - [\`"focus"\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event): the element gains keyboard focus - [\`"blur"\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event): the element lost keyboard focus - [\`"scroll"\`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event): the user has scrolled - [\`"resize"\`](https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event): the window has been resized (only works on the \`window\` object) `31:T81b,md` ## Adding Event Listeners with \`addEventListener()\` The [\`addEventListener()\`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) method allows us to specify an event that we want our code to react to. We always call \`addEventListener()\` on either a DOM node or on the \`window\` object. \`addEventListener()\` take two mandatory arguments (and some optional arguments that we will introduce later): - a string that specifies the **event type** - a **callback** that will be called when that event type happens on the target object (the target object is whatever we called \`addEventListener()\` on). Benefit of using an \`addEventListener()\`: 1. The \`addEventListener()\` method attaches an event handler to the specified element. 2. The \`addEventListener()\` method attaches an event handler to an element without overwriting existing event handlers. 3. You can add many event handlers to one element. 4. You can add event listeners to any DOM object not only HTML elements. i.e the window object. \`\`\`JavaScript element.addEventListener(event, function, useCapture); \`\`\` Demo: Let use the examples from above but re-write them in addEventListener() method;
### \`removeEventListener()\` The [\`removeEventListener()\`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener) method allows us to stop listening for a given event type. It accepts two mandatory arguments (like \`addEventListener()\`): - a string that specifies the **event type** - a **callback** that we do not want to be called anymore ` 32:T6eb,md` ## Bubbling VS Capturing Event bubbling and capturing are two ways of event propagation in the HTML DOM, they determines in which order the elements receive the event. ### Bubbling When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors. In other words, the event is first captured and handled by the innermost element and then propagated to outer elements. Demo:

If paragraph tag is clicked, 3 alerts: p → div → form. ### Capturing With capturing, the event is first captured by the outermost element and propagated to the inner elements. Capturing is raely used in real code, but sometimes can be useful. The standard DOM Events describes 3 phases of event propagation: 1. Capturing phase – the event goes down to the element. 2. Target phase – the event reached the target element. 3. Bubbling phase – the event bubbles up from the element.

Picture and content reference from [Javascript Info- Bubbling and capturing](https://javascript.info/bubbling-and-capturing), and you can take a look for more information on bubbling and capturing. `33:[{"id":"81e1e32830f8be4eeb543ed1ae4d074cd80c8f595a76b6bca73fa32a577a0d6741ad2cc6990763af66845551fb2a1ba0a0f927b2fc79c9e11667bf15f86c23fd","href":"https://static.observableusercontent.com/files/81e1e32830f8be4eeb543ed1ae4d074cd80c8f595a76b6bca73fa32a577a0d6741ad2cc6990763af66845551fb2a1ba0a0f927b2fc79c9e11667bf15f86c23fd","name":"image.png","type":"image/png","lastModified":1612730346358.355,"size":29859},{"id":"f95fce96a17879ea77a8505fc4d012b7f675ff9e8558c46547e3117ff7f6ffa9ad0817982807bc95dc4e25c4fba370f9a96cd8bdccb79fb58efeeea933641bed","href":"https://static.observableusercontent.com/files/f95fce96a17879ea77a8505fc4d012b7f675ff9e8558c46547e3117ff7f6ffa9ad0817982807bc95dc4e25c4fba370f9a96cd8bdccb79fb58efeeea933641bed","name":"image-1.png","type":"image/png","lastModified":1612730346519.522,"size":191607}] 2e:{"id":"095fc4cd45af3c46","slug":"si-579-javascript-events","title":"JavaScript Events","thumbnail":"c682c47ed6f80ca98cc8f81e8d45a295453f170120fe3be577ccc20508a9602b","access_level":"public","create_time":"$D2021-02-07T20:33:32.099Z","update_time":"$D2023-10-02T17:43:38.108Z","view_time":null,"first_public_time":"$D2021-02-08T07:21:17.399Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":70,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"JavaScript Events","cells":[{"id":0,"value":"md`# JavaScript Events`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"md`\n## Setting HTML Element Attributes\n\nOne way to add an event listener is by setting an attribute on the element that we care about. You can pick any of the elements above and add \\`on\\` to the beginning of the event name type and set it as an attribute on the HTML element. For example, to listen to a \\`click\\` event on a \\`\n\\`\\`\\`\n\nJavaScript:\n\\`\\`\\`JavaScript\nfunction doSomething(event) {\n alert(\"You clicked the button!\");\n}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"md`\nDemo:\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"md`\n## Adding Event Listeners by Setting Attribute Values\n\nAnother way we can add event listeners in JavaScript is by setting the attribute value associated with the event we want to listen to. For example, if we have a DOM element \\`dom_elem\\`, we can specify a function to run when the user clicks on that element by running:\n\n\\`\\`\\`JavaScript\nfunction elementClicked(event) {\n // react to the click\n}\ndom_elem.onclick = elementClicked;\n\\`\\`\\`\n\nHowever, the preferred way to add event listeners will be \\`addEventListener()\\` (described below):\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"