JavaScript interaction with HTML is handled through the events that occur when the user or the browser manipulates a page.
In other words, we can say that events are things that happen in the system you are programming.
Events are fired inside the window.
The action to which JavaScript can respond is called an Event. An Event is some notable action to which a script can respond.
Events are the parts of the Document Object Model (DOM) Level 3 and every HTML element contains a set of events that can trigger Javascript code.
When the page loads, it is called an event. When the user clicks on the button, that click to an event. Other examples include events like pressing any key, closing a window, resizing a window, etc.
For Example :
The user selects, clicks, or hovers the cursor over a certain element. The user chooses a key on the keyboard.
The user resizes or closes the window. A web page finishes loading.
A form is submitted.
A video is played, paused, or ended. An error occurs.
Some Event :
1. onclick
2. on mouseover and onmosueout
3. on the key-down script, the Script runs when the key is pressed
4. on the keypress script, the Script runs when the key is pressed and released on key up the script, the Script runs when the key is released.
Example:
<!DOCTYPE html>
<html>
<head>
<title><title>
</head>
<body>
<h1>Hello Event</h1>
<button onclick = "myfun()" >Click Me</button>
<script type = "text/javascript"> function myfun(){
document.body.style.backgroundColor = '#3b5999'; document.body.style.color = 'white';
}
</script>
</body>
</html>
Types of Event
In this lesson, we learn about JavaScript Events Types. We will see the different types of events in JavaScript.
We can classify events into three categories are-
W3C DOM Speciflcation: W3c manages all the DOM event specifications, except those that deal with elements.
HTML5 Speciflcation: These include all the events specifically used with HTML. These include submitting, inputting, etc.
Browser Object Model: W3 specifications do not yet cover these events. They deal with touchscreen devices and the events in this section include touchstart.
There are 8 types of JavaScript Events which we discussed below:
- UserInterface Event
- WindowEvent
- HTML5Event
- MutationEvent and Observers
- FormEvent
- KeyboardEvent
- MouseEvent
- Focusand Blur Event
- TextEvent
Keyboard Event:
In this event is a fire on the device, when the user interacts event with the keyboard. There are three types of keyboard events are as follow:
Keypress event Keydown event Keyup event
Keydown Event: It is a combination of the key-up and key-down events. It fires as a key is pressed down.
Keypress Event: It is fire after a key is pressed down (after the key is down). It only works with printable characters.
Keyup Event: It fires as the key is released.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Event Example<title>
</head>
<body>
<h1>Key Event</h1>
Name : <input type = "text" id = "mytext">
<script>
var text = documet.getElementById("mytext"); function ke(e){
console.log(e.type + ' ' + e.keycode + ' ' + string.fromcharcode (e.keycode));
}
txt.addEventListener("keydown", ke, false); txt.addEventListener("keypress", ke, false); txt.addEventListener("keyup", ke, false);
</script>
</body>
</html>
Mouse Event :
There are Ten types of mouse events as follows: mouse down
mouseup click
dblclick mouse enter mouse leave mouseover mouse out mouse move context menu
- mousedown: It fires when the mouse button is pressed
- mouseup: It fires when the mouse button is released.
- click:It fires when something is mouse down, mouse up, and click event fires in sequence.
- dblclick: It fires when something is clicked twice in rapid mouse down, mouse up, click, mouse down, mouse up, click, and dblclick event is a fire in sequence.
- mouseenters: It fires when a mouse starts to hover over some No Bubble.
- mouseleave: It fires when a mouse exits while hovering over some No Bubble.
- mouseover:It fires when a mouse is hovering over some
- mouseout: It fires when the mouse leaves from hovering over some
- Mousemove:It fires when the mouse
- contextmenu: It fires when the mouse’s right button is
Focus and Blur Event :
Focus- It fires when an element gains focus, such as selecting a form field. No Bubble. Blur- It fires when an element loses focus, such as moving away from a form field. No Bubble.
Focusin – It fires as an element is about to gain focus.
Focusout- It fores just as an element loses focus and just before the blur event.
Form Event :
Form events are events that get triggered when a user interacts with a form on a website.
- OnBlur
- OnChange
- OnFocus
- OnSelect
- OnSubmit
- OnKeyDown
- nKeyUp
- OnReset
Text Event :
Text event is used in the textual component.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Event Example<title>
</head>
<body>
<h1>Text Event</h1>
Name : <input type = "text" id = "mytext">
<script>
var text = documet.getElementById("mytext"); function show(e){
console.log(e.type + ' ' + e.data);
}
txt.addEventListener("textInput", show, false);
</script>
</body>
</html>
Window Event :
Window event is used with the GUI ( window container ), and for any container, we add a listener with it. The listener will tell when the window is opened and when it is closed.
- Onabort
- Onload
- OnUnload
- Onafterprint
- Onbeforeprint
- Onbeforeunload
- Onerror
- Onhashchange
- Onresize
- Ononline
- Onoffline
Conclusion:
JavaScript is a dynamic programming language it will give less server interaction and increased interactivity richer interface to the user. By using JavaScript development tools
users can create interactive feel good web pages. Events are very important in any webpage
or application, and by now, you understand the basics of how to listen for and react to them. The question is now: where do you go from here? The Mozilla Development Network. The
MDN is a fantastic resource for reference information on JavaScript and DOM- including
events You will flnd information, example, and even a browser support matrix for just about every type of event and Event Object properties.
