Basic Event Model



The web application itself is event-driven. It does something at an appropriate time through a user's operation or system event. A "Basic Event Model" exists before the standardization of event. Even not standardized, yet it has better browser compatibility (in contrast to "DOM Level 2 Event Model" or "Internet Explorer Event Model"). So, it's a well-known and the most popular event model.

In "Basic event model", you have to specify the event property a function called when the event happens. For example, registering the load event of window allows us to do something when all page resources are loaded. What you have to do is specify the window.onload event a function. You have seen that in several examples:
window.onload = function() {
    // do something what the onload event is triggered.
};

For example, specifying the onclick event allows us to do something when a button is clicked. 
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type">
        <script type="text/javascript">
            window.onload = function() {
                function handler() {
                    document.getElementById('console').innerHTML 
                         = 'Who\'s clicked: ' + this.id;
                }
                document.getElementById('btn1').onclick = handler;
                document.getElementById('btn2').onclick = handler;
            };
        </script>
    </head>
    <body>
        <button id="btn1">Button 1</button><br>
        <button id="btn2">Button 2</button><br>
        <div id="console"></div>
    </body>
</html>

In the above example, the handler function registers the click event of the button elements. When an event is triggered on an element and the callback function is called, this will refer to that element. In this example, when you click a button and handler is called, this will refer to that button element. This way is called "Traditional Model" or "Traditional Registration Model".

The other way is not recommended now, but commonly seen in the past pages. That is writing JavaScript directly in the markup. It's called "Inline Model" or "Inline Registration Model". For example:
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type">
        <script type="text/javascript">
            function handle(element) {
                document.getElementById('console').innerHTML 
                     = 'Who\'s clicked: ' + element.id;
            }
        </script>
    </head>
    <body>
        <button id="btn1" onclick="handle(this);">Button 1</button><br>
        <button id="btn2" onclick="handle(this);">Button 2</button><br>
        <div id="console"></div>
    </body>
</html>

Although only a short code in the markup, JavaScript still invades this web page. It's not recommended right now. The above example doesn't directly specify the click event a function. In fact, placing JavaScript inline together with an HTML markup will create an anonymous function automatically. That is, the above example is like the following code:
document.getElementById('btn1').onclick = function() {
    handle(this);
};

The specified JavaScript will be the body of the anonymous function. This also proves the concept that this in the onclick attribute actually represents the button element.

Several events have default actions. For example, the submit event of the form element is submitting the form by default; the default behavior of the click event for a hyberlink is loading the linked page. In the "Basic Event Model", returning false from the event handler will cancel the default behavior. For example:  
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type">
        <script type="text/javascript">
            window.onload = function() {
                document.form1.onsubmit = function() {
                    if(this.data.value.length === 0) {
                        return false;
                    }
                };
            };
        </script>
    </head>
    <body>
        <form name="form1" action="fake.do">
            Input data: <input name="data"><br>
            <button type="submit">Submit</button>
        </form>
    </body>
</html>

In the above example, clicking on the button triggers the submit event of the form element. The callback function checks if there's a value in the input box and returns false when the input box is empty. This will cancel the submission and is the basic way to do form validation. If you want to do this by "Inline Model ", as follows: 
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type">
        <script type="text/javascript">
            function validate(form) {
                if(form.data.value.length === 0) {
                    return false;
                }
                return true;
            }
        </script>
    </head>
    <body>
        <form name="form1" action="fake.do" 
              onsubmit="return validate(this);">
            Input data: <input name="data"><br>
            <button type="submit">Submit</button>
        </form>
    </body>
</html>

If you want to prompt users when they leave a page, using "Inline Model" will be as follow:
<a href="https://openhome.cc"
   onclick="return confirm('Say goodbye?');">Openhome.cc</a>

Not only a user operation but also calling a specific function can trigger an event. For example, calling the submit function of the form element can trigger its submit event. If you want to focus on the first input box when the page is loaded, you can call the focus function of the input element. For example, if there's an input element with an 'user' id, focusing on it when the page is loaded can be done as follow:
window.onload = function() {
    document.getElementById('test').focus();
};