Page 216 - Web Applications (803) Class 12
P. 216

3.14 JAVASCRIPT EVENTS

              The way that JavaScript interacts with HTML is through events that happen whenever a user or browser
              modifies a page. A page load is referred to as an event. An event also occurs when a user hits a button. The
              actions of pushing any key, closing a window, resizing a window, etc. are other instances.

              Thus, an event is defined as a change in an object’s state. There are a number of events in HTML that show
              when a user or browser performs a certain action. JavaScript responds to these events when JS code is
              embedded in HTML and permits execution. The act of responding to events is known as event handling. As
              a result, JavaScript uses event handlers to handle HTML events.
              Developers can use these events to run JavaScript coded replies that, among other things, cause buttons to
              close windows, users to see messages, data to be validated, and just about any other reaction imaginable.
              Events are a component of the Document Object Model (DOM) Level 3 and are present in every HTML
              element. These events can be used to execute JavaScript code. Some examples are as follows:

                     Event Performed          Event Handler                         Description

                   click                   onclick                When mouse clicks on an element

                   mouseover               onmouseover            When the  mouse cursor approaches over  the
                                                                  element
                   mouseout                onmouseout             When the mouse cursor exits an element

                   mousemove               onmousemove            When any mouse movement takes place

                   load                    onload                 When the browser has finished loading the page

                   unload                  onunload               The browser unloads the current webpage when
                                                                  the visitor exits.
                   submit                  onsubmit               The user submits the form

                   focus                   onfocus                When an element gets selected or user
                                                                  concentrates on that element

              Let us see few examples of event handling through JavaScript code.

              Example 1: The simplest and most widely used is the click event which occurs on the click of a button. In
              this example, when the button is clicked, the event onclick is triggered. This calls the function display() which
              displays the current date and time.

                  <html>
                  <script>
                  function display() {
                  var d=Date();
                  alert("The date & time is "+ d)

                  }
                  </script>
                  <body>
                  <input type="button" onclick=display() value="Click to know Date & Time">


                214   Touchpad Web Applications-XII
   211   212   213   214   215   216   217   218   219   220   221