## **What is an Event?**
Events in JavaScript are actions or occurrences that happen in the browser, usually as a result of user interaction.
## **Event Handlers**
Event Handlers are JavaScript methods (functions of objects) that allow programmers to control what happens when events occur.
An **Event** is the result of user interaction, such as:
- Clicking a button (`onClick`)
- Hovering over an element (`onMouseOver`)
- Typing in a text field (`onChange`)
- Loading a page (`onLoad`)
Event Handlers are attributes added to HTML elements to specify JavaScript code that
runs when an event occurs.
Example:
```html
<INPUT TYPE="button" NAME="click1" VALUE="Click me for fun!" onClick="event_handler_code">
```
Types of Event Handlers
There are three ways to trigger events or functions:
1. Link Events
An Event Handler can be placed within an <A> tag.
<A HREF="foo.html" onMouseOver="doSomething()"> ... </A>
Examples:
<A HREF="#" onClick="alert('Ooo, do it again!');">Click on me!</A> <A HREF="javascript:void('')" onClick="alert('Ooo, do it again!');">Click on me!</A> <A HREF="javascript:alert('Ooo, do it again!')">Click on me!</A>
2. Actions within Forms
Event Handlers can be used within form elements.
Example:
<FORM> <INPUT TYPE="button" onClick="doSomething()"> </FORM>Another example using onChange:
<INPUT TYPE="text" onChange="if (this.value <= 5) { alert('Please enter a number greater than 5'); }">Multiple commands in an Event Handler:
<INPUT TYPE="text" onChange="alert('Thanks for the entry.'); confirm('Do you want to continue?');">3. BODY onLoad & onUnload
Event Handlers in the <BODY> or <FRAMESET> tag run when the document is fully loaded or unloaded.
Example:
<BODY onLoad="loaded = true;"> <FORM> <INPUT TYPE="button" VALUE="Press Me" onClick="if (loaded) doit();"> </FORM> </BODY>Common Event Handlers in JavaScript
Event Handler Description
onAbort The user cancels loading an image
onBlur Input focus is removed from a form element
onClick The user clicks on a link or form element
onChange The value of a form field changes
onError An error occurs during loading
onFocus Input focus is given to a form element
onLoad The page is fully loaded
onMouseOut The user moves the pointer off an element
onMouseOver The user moves the pointer over an element
onReset The user clears a form
onSelect The user selects text in a field
onSubmit A form is submitted
onUnload The user leaves a page
Available Event Handlers for Different Elements
Element Available Event Handlers
Button onClick, onMouseOver
Checkbox onClick
Clickable ImageMap Area onClick, onMouseOver, onMouseOut
Document onLoad, onUnload, onError
Form onSubmit, onReset
Framesets onBlur, onFocus
Hypertext Link onClick, onMouseOver, onMouseOut
Image onLoad, onError, onAbort
Radio Button onClick
Reset Button onClick
Selection List onBlur, onChange, onFocus
Submit Button onClick
TextArea onBlur, onChange, onFocus, onSelect
Text Field onBlur, onChange, onFocus, onSelect
Window onLoad, onUnload, onBlur, onFocus
This guide covers the fundamentals of JavaScript Events and Event Handlers. 🚀
To mark this module as complete, you must finish this quiz. Once submitted, you'll need to wait 2 hours before attempting it again.