What are events in JS? And how it occur in applications?

0 votes
25 views
Ravi Vishwakarma asked 8 days ago in Web Application by Ravi Vishwakarma

What are events in JS? And how it occur in applications.

1 Answer

1 votes
Ethan Karla answered 6 days ago by Ethan Karla
JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page. When the page loads, it is called an event. When the user clicks a button, that click too is an event. Other examples include events like pressing any key, closing a window, resizing a window, etc. Developers can use these events to execute JavaScript coded responses, which cause buttons to close windows, messages to be displayed to users, data to be validated, and virtually any other type of response imaginable. Events are a part of the Document Object Model (DOM) Level 3 and every HTML element contains a set of events which can trigger JavaScript Code. Here we will see a few examples to understand a relation between Event and JavaScript
 In JavaScript many types of events, onchange, onclick, onmouseover, onmouseout, onkeydown, onload, onblur, ondrop, onfocus, etc.
Onclick event
This is most frequently used event type which occur when a user click the button of his mouse.
JavaScript.js

function changeColor() {
        var name = window.document.getElementById('color');
        alert('Your selected color is : ' + name.value);
        name.style.backgroundColor = name.value;
        window.document.body.style.backgroundColor = name.value;
    }
Some.html

<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8' />
    <title>JS Demo</title>
    <style type='text/css'>
        * {
            margin:10px;
            padding:0px;
        }
        select {
            width:100px;
        }
    </style>
    <script src='JavaScript.js' type='text/javascript'></script>
</head>
<body>
    <span>Select Color name : </span>
    <select name='color' id='color' >
        <option value='red'>Red</option>
        <option value='yellow'>Yellow</option>
        <option value='white'>White</option>
        <option value='pink'>Pink</option>
        <option value='green'>Green</option>
    </select>
    <button type='button' onclick='changeColor()' value=' Submit '> Submit </button>
</body>
</html>