Nearby lessons
29 of 40🎯 JavaScript Events
📌 What are JavaScript Events?
JavaScript Events are actions or occurrences that happen in the browser, such as a user clicking a button, moving the mouse, typing in a field, or submitting a form.
Events allow developers to execute JavaScript code in response to user interactions. This is called Event Handling.
Using event handlers, JavaScript can make web pages interactive and dynamic.
📌 What is an Event?
| Attribute | Description |
|---|---|
Definition | An event is a change in the state of an element caused by user action or browser behavior. |
Purpose | JavaScript uses events to trigger code execution when users interact with the webpage. |
🖱️ Mouse Events
| Attribute | Description |
|---|---|
click | Fires when an element is clicked. (Handler: <code>onclick</code>) |
mouseover | Fires when the mouse pointer moves over an element. (Handler: <code>onmouseover</code>) |
mouseout | Fires when the mouse pointer leaves an element. (Handler: <code>onmouseout</code>) |
mousedown | Fires when a mouse button is pressed over an element. (Handler: <code>onmousedown</code>) |
mouseup | Fires when a mouse button is released over an element. (Handler: <code>onmouseup</code>) |
mousemove | Fires when the mouse is moved inside an element. (Handler: <code>onmousemove</code>) |
⌨️ Keyboard Events
| Attribute | Description |
|---|---|
keydown | Fires when a key is pressed down. (Handler: <code>onkeydown</code>) |
keyup | Fires when a key is released. (Handler: <code>onkeyup</code>) |
📋 Form Events
| Attribute | Description |
|---|---|
focus | Fires when an element gains focus. (Handler: <code>onfocus</code>) |
blur | Fires when an element loses focus. (Handler: <code>onblur</code>) |
change | Fires when the value of an element is changed. (Handler: <code>onchange</code>) |
submit | Fires when a form is submitted. (Handler: <code>onsubmit</code>) |
🧠 Test Your Knowledge
3 QuestionsProgress: 0 / 3
Keep Going!JS - Mouse Events