JavaScript Events

An event occurs when a user interacts with a web page, such as when he clicks a link or button, enters text into an input or textarea, selects something in a select box, presses a key on the keyboard, moves the mouse pointer, submits a form, and so on. In some circumstances, such as the page load and unload events, the Browser can initiate the events.

When an event occurs, you may detect it with a JavaScript event handler (or an event listener) and perform a specified activity or collection of activities. Event handler names usually begin with the word "on," therefore an event handler for the click event is named onclick, an event handler for the load event is called onload, an event handler for the blur event is called onblur, and so on.

An event handler can be assigned in a variety of ways. The simplest method is to use the special event-handler attributes to add them straight to the start tag of the HTML components. For example, we can use the onclick property to attach a click handler to a button element.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Onclick Event</h1>
<button type="button" onclick="alert('Hello World!')">Click Me</button>

</body>
</html>

Preview

Events in Javascript provide for a dynamic interface to a webpage. These events are linked to Document Object Model components (DOM). These events are propagated upwards in the DOM from children to parent by default. Events could be bound inline or in an external script.

Mouse Events

When a user clicks an element or moves the mouse pointer over an element, a mouse event is triggered. Here are some of the most essential mouse events, along with associated event handlers.

1. The Click Event (onclick)

When a user clicks on an element on a web page, the click event happens. These are frequently form components and connections. An onclick event handler can be used to handle a click event.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Onclick Event</h1>
<button type="button" onclick="Click()">Click Me</button>
<p id="demo"></p>
<script>
    function Click(){
        document.getElementById("demo").innerHTML = "You have clicked a button!";
    }
</script>

</body>
</html>

Preview

2. The Contextmenu Event (oncontextmenu)

When a user presses the right mouse button on an element to access a context menu, the contextmenu event happens.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Oncontextmenu Event</h1>
<button type="button" oncontextmenu="conTextMenu()">Right Click on Me</button>
<p id="demo"></p>
<script>
    function conTextMenu(){
        document.getElementById("demo").innerHTML = "You have right-clicked a button!";
    }
</script>

</body>
</html>

Preview

3. The Mouseover Event (onmouseover)

When a user moves the mouse cursor over an element, the mouseover event happens. The onmouseover event handler may be used to handle the mouseover event.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Onmouseover Event</h1>
<button type="button" onmouseover="mouseOver()">Place Mouse Over Me</button>
<p id="demo"></p>
<script>
    function mouseOver(){
        document.getElementById("demo").innerHTML = "You have placed mouse pointer over a button!";
    }
</script>

</body>
</html>

Preview

4.The Mouseout Event (onmouseout)

When a user drags the mouse pointer outside of an element, the mouseout event happens. The onmouseout event handler may be used to handle the mouseout event.

Example

<!DOCTYPE html>
<html>
<body>

<h1>Onmouseout Event</h1>
<button type="button" onmouseout="mouseOut()">Place Mouse Inside Me and Move Out</button>
<p id="demo"></p>
<script>
    function mouseOut(){
        document.getElementById("demo").innerHTML = "You have moved out of the button!";
    }
</script>

</body>
</html>

Preview

Keyboard Events

When a user presses or releases a key on the keyboard, a keyboard event is triggered. Here are some of the most essential keyboard events and event handlers.

1. The Keydown Event (onkeydown)

When a user hits a key on the keyboard, the keydown event happens. The onkeydown event handler can be used to handle the keydown event.

Example

<!DOCTYPE html>
<html>
<body>

<h1>onkeydown Event</h1>
<p>You have pressed a onkeydown inside text input!</p>
<input type="text" onkeydown="keyDown(this)">

<script>
    function keyDown(d){
        d.style.background = "green";
    }
</script>

</body>
</html>

Preview

2. The Keyup Event (onkeyup)

When a user releases a key on the keyboard, the keyup event happens. The onkeyup event handler may be used to handle the keyup event.

Example

<!DOCTYPE html>
<html>
<body>

<h1>onkeyup Event</h1>
<p>You have pressed a onkeyup inside text input!</p>
<input type="text" onkeyup="keyUp(this)">

<script>
    function keyUp(u){
        u.style.background = "blue";
    }
</script>

</body>
</html>

Preview

3. The Keypress Event (onkeypress)

When a user presses a key on the keyboard that has a character value associated with it, the keypress event occurs. Ctrl, Shift, Alt, Esc, Arrow keys, and so on will not generate a keypress event, but will instead generate a keydown and keyup event. The onkeypress event handler can be used to handle the keypress event.

Example

<!DOCTYPE html>
<html>
<body>

<h1>onkeypress Event</h1>
<p>You have pressed a onkeypress inside text input!</p>
<input type="text" onkeypress="keyPress(this)">

<script>
    function keyPress(p){
        p.style.background = "red";
    }
</script>

</body>
</html>

Preview

Form Events

When a form control receives or loses attention, or when the user modifies a form control value, such as by putting text into a text input or selecting any item in a pick box, a form event is called. Here are some of the most significant form events and event handlers.

1. The Focus Event (onfocus)

When a user grants focus to an element on a web page, the focus event happens. The onfocus event handler may be used to handle the focus event.

Example

<!DOCTYPE html>
<html>
<body>

<h1>onfocus Event</h1>
<p>You have pressed a onfocus inside text input!</p>
<input type="text" onfocus="Focus(this)">

<script>
    function Focus(f){
        f.style.background = "yellow";
    }
</script>

</body>
</html>

Preview

2. The Blur Event (onblur)

When the user moves the attention away from a form element or a window, the blur event happens. The onblur event handler can be used to handle the blur event.

Example

<!DOCTYPE html>
<html>
<body>

<h1>onblur Event</h1>
<input type="text" onblur="Blur(this)">

<script>
    function Blur(b){
        b.style.background = "red";
    }
</script>

</body>
</html>

Preview

3. The Change Event (onchange)

When a user changes the value of a form element, the change event happens. The onchange event handler may be used to handle the change event.

Example

<!DOCTYPE html>
<html>
<body>

<h1>onchange Event</h1>
<select id="mySelect" onchange="myFunction()">
    <option value="HTML">HTML</option>
    <option value="CSS">CSS</option>
    <option value="JavaScript">JavaScript</option>
    <option value="jQuery">jQuery</option>
</select>
<p>You selected language: <span id="demo"></span></p>

<script>
    function myFunction() {
        var a = document.getElementById("mySelect").value;
        document.getElementById("demo").innerHTML = " " + a;
    }
</script>

</body>
</html>

Preview

4. The Submit Event (onsubmit)

When a user submits a form on a web page, the submit event happens. The onsubmit event handler may be used to handle the submit event.

Example

<!DOCTYPE html>
<html>
<body>

<h1>onsubmit Event</h1>
<form action="action.php" method="post" onsubmit="alert('Form data will be submitted to the server!');">
    <label>First Name:</label>
    <input type="text" name="first-name" required>
    <input type="submit" value="Submit">
</form>

</body>
</html>

Preview

Document/Window Events

Events are also generated after the website has loaded or when the user resizes the browser window, among other things. Here are some of the most essential document/window events, along with associated event handlers.

1. The Load Event (onload)

When a web page has finished loading in the web browser, the load event happens. The onload event handler may be used to handle the load event.

Example

<!DOCTYPE html>
<html>
<body onload="load()">

<h1>onload Event</h1>
<script>
    function load() {
        document.write("Page is loaded successfully!");
    }
</script>

</body>
</html>

Preview

2. The Unload Event (onunload)

When a user departs the current web page, the unload event happens. The onunload event handler can be used to handle the unload event.

Example

<!DOCTYPE html>
<html>
<body onload="unload()">

<h1>onunload Event</h1>
<script>
    function unload() {
        document.write("Page is unloaded successfully!");
    }
</script>

</body>
</html>

Preview

3. The Resize Event (onresize)

When a user resizes the browser window, the resize event happens. The resize event is also triggered when the browser window is reduced or maximized. The onresize event handler can be used to handle the resize event. When you resize the browser window to a new width and height, the following example will display an alert message.

Example

<!DOCTYPE html>
<html>
<body onresize="reSize()">

<h1>onresize Event</h1>
<p id="result"></p>
<script>
    function reSize() {
        var w = window.outerWidth;
        var h = window.outerHeight;
        var ws = "Window size: width=" + w + ", height=" + h;
        document.getElementById("result").innerHTML = ws;
    }
</script>

</body>
</html>

Preview

FAQs

JavaScript events are actions or occurrences that happen in a web browser, such as a user clicking a button, hovering over an element, or submitting a form. Events allow developers to respond to user interactions and trigger specific actions or functions in their JavaScript code. By attaching event handlers to HTML elements, developers can define how the web page should respond when a particular event occurs. JavaScript events are instrumental in creating interactive and dynamic web applications, enabling user interactivity and enhancing the overall user experience.

JavaScript provides several methods for handling events. The most common approach is to use the addEventListener() method, which allows you to attach an event listener to an HTML element. With addEventListener(), you specify the type of event you want to listen for (e.g., "click", "mouseover", "submit") and the function that should be executed when the event occurs. Another approach is to use inline event handlers directly in HTML attributes, such as onclick, onmouseover, or onsubmit, where you assign a JavaScript function to be executed when the corresponding event occurs. Both approaches provide flexibility in responding to events and executing the desired functionality.

In JavaScript, you can prevent the default behavior of an event using the preventDefault() method. When an event occurs, such as submitting a form or clicking a link, the browser performs a default action associated with that event. However, by calling preventDefault() within the event handler function, you can stop the browser from executing its default behavior. This can be useful in scenarios where you want to customize or override the default behavior of certain events. For example, you can prevent a form from submitting or prevent a link from navigating to a new page. By preventing the default behavior, you gain more control over how events are handled and can implement custom functionality as needed.

JS Objects

JS Strings

JavaScript Events

Example

Mouse Events

1. The Click Event (onclick)

Example

2. The Contextmenu Event (oncontextmenu)

Example

3. The Mouseover Event (onmouseover)

Example

4.The Mouseout Event (onmouseout)

Example

Keyboard Events

1. The Keydown Event (onkeydown)

Example

2. The Keyup Event (onkeyup)

Example

3. The Keypress Event (onkeypress)

Example

Form Events

1. The Focus Event (onfocus)

Example

2. The Blur Event (onblur)

Example

3. The Change Event (onchange)

Example

4. The Submit Event (onsubmit)

Example

Document/Window Events

1. The Load Event (onload)

Example

2. The Unload Event (onunload)

Example

3. The Resize Event (onresize)

Example

FAQs

Links

Tutorials

Connect with us

JavaScript Events

Example

Mouse Events

1. The Click Event (onclick)

Example

2. The Contextmenu Event (oncontextmenu)

Example

3. The Mouseover Event (onmouseover)

Example

4.The Mouseout Event (onmouseout)

Example

Keyboard Events

1. The Keydown Event (onkeydown)

Example

2. The Keyup Event (onkeyup)

Example

3. The Keypress Event (onkeypress)

Example

Form Events

1. The Focus Event (onfocus)

Example

2. The Blur Event (onblur)

Example

3. The Change Event (onchange)

Example

4. The Submit Event (onsubmit)

Example

Document/Window Events

1. The Load Event (onload)

Example

2. The Unload Event (onunload)

Example

3. The Resize Event (onresize)

Example

FAQs

What are JavaScript events and how are they used?

How do you handle JavaScript events?

How do you prevent the default behavior of an event in JavaScript?