Events in Javascript
JavaScript events are user actions or system occurrences, like mouse clicks, keyboard presses, or page loads.
Events are the browser's way of indicating when something has happened (such as when a page has finished loading or a button has been clicked) so that JavaScript can respond to these events by executing any code that needs to run.
JavaScript provides a range of built-in events that developers can use to create interactive web applications, including:
Mouse events
Mouse events are triggered by user interactions with the mouse, such as clicking, hovering, and scrolling.
As an example:
Editor
In this example:
There is a button with the ID
myButton
that has three mouse events attached to it:onclick
,onmouseover
, andonmouseout
.The
onclick
event is handled by thehandleClick()
function, which displays an alert when the button is clicked.The
onmouseover
event is handled by thehandleMouseOver()
function, which changes the background color of the button to yellow when the mouse is over it.The
onmouseout
event is handled by thehandleMouseOut()
function, which changes the background color of the button back to white when the mouse moves away from it.
Keyboard events
Keyboard events are triggered by user interactions with the keyboard, such as pressing a key or holding down a key for a certain amount of time.
As an example:
Editor
In this example:
There is a text input with the ID
myInput
that has a keyboard event attached to it:onkeypress
.The
onkeypress
event is handled by thehandleKeyPress(event)
function, which takes an event parameter.This function checks if the key pressed is the
Enter
key (which has a code of 13), and displays an alert if it is.
Note that the function uses the keyCode
and which
properties of the event object to get the code of the key that was pressed. This is because different browsers use different properties to represent the key code.
Form events
These events are triggered by changes to form elements, such as when a user types in an input field or selects an option from a drop-down list.
As an example:
Editor
In this example:
- There is a form with
name
andemail
input fields and a submit button. - The form has a submit event attached to it:
onsubmit
. - The
onsubmit
event is handled by thehandleSubmit(event)
function. - The
handleSubmit(event)
function prevents form submission usingpreventDefault()
method. - It gets input values using the
FormData
object. - It displays form data in an alert using the
alert()
method.
The name
attribute is used to identify the input fields in the FormData
object. Also, the type
attribute of the email
input field is set to email
to ensure that the input is a valid email address.
Window events
Window events are triggered by changes to the window, such as when the window is resized or scrolled. These events are useful for creating responsive web applications that adapt to different screen sizes.
As an example:
Editor
In this example:
There is a
div
element with the IDsize
that displays the size of the window.The
body
element has a resize event attached to it:onresize
.The
onresize
event is handled by thehandleResize()
function,Which gets the width and height of the window using the
innerWidth
andinnerHeight
properties of thewindow
object.It then sets the content of the
size
element using theinnerHTML
property.
The onresize
event is attached to the body
element, which means that the function will be called whenever the window is resized. If you want to listen for other window events, you can attach the event to the window
object instead of the "body" element.
Document events
These events are triggered by changes to the document, such as the "page finishing loading" or the "user scrolling the page".
As an example:
Editor
In this example:
- The
body
element has two document events attached to it:onload
andonunload
. - The
onload
event is triggered when the page finishes loading, - The
onunload
event is triggered when the page is unloaded (e.g., when the user navigates away from the page).
Not all browsers support every document event, and some of them have been deprecated. Always verify browser compatibility and current standards before using document events in your web application.