JavaScript Events
When a user interacts with a web page, an event takes place. Examples include when the user clicks a link or button, types text into a text box or input field, selects an option, presses a key on the keyboard, moves the mouse, submits a form, etc. Some events, like the page load and unload events, may even be started by the browser itself. Event are triggered when something happens on web page.
Some example of events are as following:
- When a link or button is clicked
- Moving a mouse over an element
- Click mouse over an element
- Selecting a radio button
The following events you can use in JavaScript.
1. Mouse events
| Event Performed | Event Handler | Description |
|---|---|---|
| click | onclick | It will fire when mouse click on an element |
| mouseover | onmouseover | It will fire when the cursor of the mouse comes over the element |
| mouseout | onmouseout | It will fire when the cursor of the mouse leaves an element |
| mousedown | onmousedown | It will fire when the mouse button is pressed over the element |
| mouseup | onmouseup | It will fire when the mouse button is released over the element |
| mousemove | onmousemove | It will fire when the mouse movement takes place. |
2. Keyboard events
| Event Performed | Event Handler | Description |
|---|---|---|
| Keydown & Keyup | onkeydown & onkeyup | It will fire when the user press and then release the key |
3. Form events
| Event Performed | Event Handler | Description |
|---|---|---|
| focus | onfocus | It will fire when the user focuses on an element |
| submit | onsubmit | It will fire when the user submits the form |
| blur | onblur | It will fire when the focus is away from a form element |
| change | onchange | It will fire when the user modifies or changes the value of a form element |
4. Window/Document events
| Event Performed | Event Handler | Description |
|---|---|---|
| load | onload | It will fire when the browser finishes the loading of the page |
| unload | onunload | It will fire when the visitor leaves the current webpage, the browser unloads it |
| resize | onresize | It will fire when the visitor resizes the window of the browser |
Next you must be defined what should happen when the event fires. You must pass a function to the event.
Example
The following section will give you the brief overview of some events as well as related JavaScript methods.
JavaScript OnClick() Method
The jQuery click() method attach an event handler function to the selected elements for "click" event. The attached function is executed when the user clicks on that element.
The following example will hide the <p> elements on a page when they are clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Executing a Function on Click Event in
jQuery
</title>
<style>
button {
padding: 20px;
font: 20px sans-serif;
background: pink;
}
</style>
<script type="text/javascript">
function buttonchangeColor() {
document.querySelector("button").style.backgroundColor = "green"
document.querySelector("button").style.color = "white";
document.querySelector("p").innerHTML = "The button changed color from pink to green"
}
</script>
</head>
<body>
<p></p>
<button onclick="buttonchangeColor()">TutorialsTrend</button>
</body>
</html>Output
Now run the code it will show button with Pink Color.
Now click on the button. Button color will changed. OnClick Event will fire.
jQuery Mouseover () Method
This method execute when move mouse over element. In the below example, The function is executed when the user place the mouse pointer over an element. Color will change.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Executing a Function on Click Event in
jQuery
</title>
<style>
button {
padding: 20px;
font: 20px sans-serif;
background: pink;
}
</style>
<script type="text/javascript">
function buttonchangeColor() {
document.querySelector("button").style.backgroundColor = "green"
document.querySelector("button").style.color = "white";
document.querySelector("p").innerHTML = "The button changed color from pink to red"
}
</script>
</head>
<body>
<p></p>
<button onmouseover="buttonchangeColor()">TutorialsTrend</button>
</body>
</html>Output
Now point mouse over an element. Class change color will change the color the element.
Prev Next