JavaScript - Events and Event Handling

JavaScript Events And Event Handling

Events and Event Handling :

When the interaction happens, the event triggers. JavaScript event handlers enable the browser to handle them. JavaScript event handlers invoke the JavaScript code to be executed as a reaction to the event triggered.

When execution of JavaScript code is delayed or deferred till some event occurs, the execution is called as deferred mode execution. This makes JavaScript an action-oriented language.

Let us understand how JavaScript executes as a reaction to these events.

Let's have a look at some of the built-in event handlers.

Event	Event-handler	Description
click	onclick	When the user clicks on an element, event handler onclick handles it.
keypress	onkeypress	When the user presses the keyboard's key, event handler onkeypress handles it.
keyup	onkeyup	When the user releases the keyboard's key, event handler onkeyup handles it.
load	onload	When HTML document is loaded in the browser, event handler onload handles it
blur	onblur	When an element loses focus, event handler onblur handles it.
change	onchange	When the selection of checked state change for input, select or text-area element changes, event handler onchange handles it.

Event handlers are associated with HTML elements and are responsible to handle or listen to the event taking place on the respective element.

Example: If we want to listen to the click event on the para element, this is how we will do it.

External script :

1. Event Handler 'onclick' is associated with the HTML element 'p' to handle the 'click' on this element.

2. When the user clicks on element 'p', event handler 'onclick' listens to the event 'click' and executes the code written against the event handler. The corresponding code is the function 'executeMe'.

3. The function 'executeMe' will now execute.

Inline script :

As seen in event handling code, event-handler is a JavaScript piece of code put inside the HTML element para.

On the right-hand-side of this code instead of invoking a function, we can directly write lines of code like this:

This is referred to as Inline Scripting where we embed lines of JavaScript code inline to HTML elements.

However, due to tight coupling with the elements in which the code is written, this approach is not suggested. The alternate and much better approach is to use functions in JavaScript.

Demo :

CODE/PROGRAM/EXAMPLE

<html>
<head>
    <style>
        div#maincontent {
            height: 100px;
            width: 500px;
            border: 1px solid #CEE2FA;
            text-align: left;
            color: #08438E;
            font-family: calibri;
            font-size: 20;
            padding: 5px;
        }
 
        div#heading {
            text-decoration: bold;
            text-align: center;
            margin-top: 80px;
            width: 500px;
            border: 1px solid #CEE2FA;
            text-align: center;
            color: #08438E;
            background-color: #CEE2FA;
            font-family: calibri;
            font-size: 20;
            padding: 5px;
        }
 
        h2 {
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <center>
        <div id="heading">
            <h2>Booking Summary</h2>
        </div>
        <div id="maincontent">
            <script>
                var seats = 4;
                var costPerTicket = 320;
                var cost = 0;
                calculateCost(seats);
                function calculateCost(tickets) {
                    var discountedCost;
                    if (tickets > 2 && tickets <= 6) {
                    document.write(
                        "Cost per ticket is: Rs." + costPerTicket + "<br>"
                    ); //Requirement 4: Calling function to calculate discounted amount, when user clicks on //the hyperlink
                    document.write(
                        "Total cost: Rs." + tickets * costPerTicket + "</b><br>"
                    );
                    document.write(
                        "<br> Congratulations! " +
                        tickets +
                        " seats are eligible for discount. <a  href=‘ ’ onclick = ‘calculateDiscount(event);’>Apply</a><br><br>"
                    );
                    } else if (tickets > 6) {
                    document.write(
                        "<br>Oops!You cannot book more than 6 tickets!!<br>"
                    );
                    } else {
                    document.write(
                        "Cost per ticket is: Rs." + costPerTicket + "<br>"
                    );
                    cost = tickets * costPerTicket;
                    document.write(
                        "<br><br>" + "Total cost: Rs." + cost + "</b><br>"
                    );
                    }
                }
                function calculateDiscount(event) {
                    event.preventDefault();
                    var discount = 10;
                    const percent = 100;
                    for (index = 1; index <= seats; index++) {
                    discountedCost =
                        costPerTicket - (discount / percent) * costPerTicket;
                    cost = cost + discountedCost;
                    discount = discount + 10;
                    }
                    alert(
                    "Amount payable after discount is: Rs." + cost
                    ); /*document.write(‘<br>’+‘Total seats: ’+seats+‘<br>’);
                    document.write(‘<br>’+‘Amount payable: Rs.’+cost+‘<br>’);*/
                }
            </script>
        </div>
    </center>
</body>
</html>

#javascript_events #Events_in_Javascript #onclick_javascript #javascript_onload #event_handling_in_javascript #onchange_javascript #event_handling_in_javascript #Events_handling_in_Javascript #js_event_handler #event_handling_in_javascript_with_examples

(New page will open, for Comment)

Not yet commented...