JAVASCRIPT EVENTS
What are the events in javascript?
Javascript events are the actions or occurrences that happen to the HTML elements in the webpage.
For example, page loading, button click, mouse move, keypress, and so on. Events provide a dynamic interface to the webpage.
An event may occur either by the browser or by the user.
Let us see an example of the click event, click the button below; it fires onclick event and alerts a message.
onclick event
onclick event is attached to the button that creates an alert box when clicked
Event Handling In Javascript
When an event occurs, then we want something to happen. Javascript interacts with HTML through events that occur when a user or the browser manipulates a webpage. Javascript can detect these events and can execute some code on specified events.
HTML has an event handler attribute to be added to HTML elements that define the type of event we want to get from the element. Here is the syntax of how to attach event handlers to the HTML.
<element event="javascript code">content...</element>
onload event:
Let's see an example of an onload event. onload event is triggered by the browser when the web
page finishes loading.
Types of Events in Javascript
There are many different kinds of events in javascript. for example
Javascript window event
window events are the events that are generated when there is some change of any kind in the browser window.
| Event | Action | Description |
|---|---|---|
| onload | webpage loaded | event is fired when page load is complete |
| unload | closing page | when user tried to close the page |
| resize | resizing browser tab | event is fired when page is resized |
javascript onload event
javascript unload event
javascript onresize event
Javascript mouse events
Mouse events are the events that are triggered when there is any action taken by the mouse.
| Event | Action | Description |
|---|---|---|
| mousedown/mouseup | onmousedown/onmouseup | mouse is clicked or released over an element |
| click | onclick | when mouse is clicked over an element |
| dbclick | on double click | when mouse is double clicked over an element |
| mousemove | onmousemove | when mouse is moved over an element |
javascript mousedown and mouseup event
Output:
Click and release the mouse in the area below.
javascript click event
Output:
Click and release the mouse in the area below.
Javascript keyboard events
keyboard events are the events that are generated when the keyboard button is clicked or released.
| Event | Action | Description |
|---|---|---|
| onkeydown | Button Down | event is fired when any keyboard button is down |
| onkeyup | Button released | event is fired when any keyboard button is released |
| onkeypress | Button pressed | event is fired when any keyboard button is pressed |
javascript keyboard events
Output:
Click and release button in area below.
Javascript form events
form events are the events that are generated when any action is taken on form elements.
| Event | Action | Description |
|---|---|---|
| submit | onsubmit | event is fired when form is submitted |
| blur | Focus Removed | event is fired when focus is removed from input section |
| focus | onfocus | event is fired when cursor is focused on form |
| change | onchange | event is fired when form is changes |
let's see examples.
Output:
Click and change values in form.