Javascript - What are events?

20 November 2020, 8:05 am by antelove19


Sources:

Oreilly Head First JavaScript Programming 1


What are events?

We’re sure you know by now that after the browser retrieves and displays your page, it doesn’t just sit there. Behind the scenes, a lot is going on: users are clicking buttons, the mouse location is being tracked, additional data is becoming available on the network, windows are getting resized, timers are going off, the browser’s location could be changing, and so on. All these things cause events to be triggered.

Whenever there’s an event, there is an opportunity for your code to handle it; that is, to supply some code that will be invoked when the event occurs. Now, you’re not required to handle any of these events, but you’ll need to handle them if you want interesting things to happen when they occur—like, say, when the button click event happens, you might want to add a new song to a playlist; when new data arrives you might want to process it and display it on your page; when a timer fires you might want to tell a user the hold on a front row concert ticket is going to expire, and so on.

What’s an event handler?

We write handlers to handle events. Handlers are typically small pieces of code that know what to do when an event occurs. In terms of code, a handler is just a function. When an event occurs, its handler function is called.

To have your handler called when an event occurs, you first need to register it. As you’ll see, there are a few different ways to do that depending on what kind of event it is. We’ll get into all that, but for now let’s get started with a simple example, one you’ve seen before:the event that’s generated when a page is fully loaded.

How to create your first event handler

There’s no better way to understand events than by writing a handler and wiring it up to handle a real, live event. Now, remember, you’ve already seen a couple of examples of handling events—including the page load event—but we’ve never fully explained how event handling works. The page load event is triggered when the browser has fully loaded and displayed all the content in your page (and built out the DOM representing the page).

Let’s step through what it takes to write the handler and to make sure it gets invoked when the page load event is triggered:

  1. First we need to write a function that can handle the page load event when it occurs. In this case, the function is going to announce to the world "I’m alive!" when it knows the page is fully loaded.

     function pageLoadedHandler() {
         alert("I'm alive!");
     }
  2. Now that we have a handler written and ready to go, we need to wire things up so the browser knows there’s a function it should invoke when the load event occurs. To do that we use the onload property of the window object, like this:

     window.onload = pageLoadedHandler;
  3. That’s it! Now, with this code written, we can sit back and know that the browser will invoke the function assigned to the window.onload property when the page is loaded.


Test drive

Go ahead and create a new file, "event.html", and add the code to test your load event handler. Load the page into the browser and make sure you see the alert.

<!doctype html>
<html lang="en">

    <head>

        <meta charset="utf-8">
        <title> I'm alive! </title>

        <script>

            window.onload = pageLoadedHandler;

            function pageLoadedHandler() {
                alert("I'm alive!");
            }

        </script>

    </head>

    <body>
    </body>

</html>

  1. Oreilly, "Oreilly Head First JavaScript Programming", page 383 




Video not yet
0 comment