Nearby lessons

9 of 14

JavaScript HTML DOM Events

πŸ“Œ What are DOM Events?

JavaScript DOM events let you execute code when users interact with your webpage. Events can be assigned using HTML attributes or JavaScript. Common events include click, input, mouseover, focus, and more.

πŸ”— HTML Event Attributes

You can directly assign events using HTML attributes such as onclick, onmouseover, etc.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

πŸ“Œ Assign Events Using JavaScript DOM

Instead of using HTML attributes, you can assign events with JavaScript using element.addEventListener() or element.event = function.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

πŸ”ƒ onload and onunload Events

onload runs when the page or element finishes loading. onunload runs when the user leaves the page.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

⌨️ oninput Event

Triggered every time a user types or changes input in a field.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

πŸ“ onchange Event

Fires when the input loses focus and its value has changed (for input, select, textarea).

Code Example
PREVIEW READY
Loading Editor...
Live Preview

πŸ–±οΈ onmouseover and onmouseout Events

onmouseover triggers when the mouse enters the element, onmouseout when it leaves.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

πŸ–±οΈ onmousedown, onmouseup, and onclick

Use onmousedown when the mouse button is pressed, onmouseup when released, and onclick for a full click action.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

🟑 onfocus Event

The onfocus event runs when an element (like input) gains focus.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

🧠 Test Your Knowledge

3 Questions

Progress: 0 / 3
Keep Going!JavaScript DOM EventListener