IT SOLUTIONS
Your full service technology partner! 
-Collapse +Expand
JavaScript
Search JavaScript Group:

Advanced
-Collapse +Expand JavaScript Store

Prestwood eMagazine

January Edition
Subscribe now! It's Free!
Enter your email:

   ► KBWebsite Scri...JavaScript a...Beginners Co...   Print This     
  From the January 2016 Issue of Prestwood eMag
 
JavaScript Beginners Corner:
JavaScript Event Model
 
Posted 16 years ago on 3/20/2003 and updated 3/2/2008
Take Away: Description of the JavaScript event handlers.

KB100192



Getting Started

If you are brand new to JavaScript, you might wish to read our introduction to JavaScript tutorial:


To demonstrate JavaScript's event model, we will use alerts. A JavaScript Alert is a method used to display an alert box with a string message and an OK button. However, every place we use an alert, you can also call a JavaScript function to do something more complex. We'll demonstrate this in our first example, the onload event.

In this article we will demonstrate many of JavaScript's events. Here is a complete lest:

  • onAbort - The user aborts the loading of an image
  • onBlur - form element loses focus or when a window or frame loses focus.
  • onChange - select, text, or textarea field loses focus and its value has been modified.
  • onClick - object on a form is clicked.
  • onDblClick - user double-clicks a form element or a link.
  • onDragDrop - user drops an object (e.g. file) onto the browser window.
  • onError - loading of a document or image causes an error.
  • onFocus - window, frame, frameset or form element receives focus.
  • onKeyDown - user depresses a key.
  • onKeyPress - user presses or holds down a key.
  • onKeyUp - user releases a key.
  • onLoad - browser finishes loading a window or all of the frames within a frameset.
  • onMouseDown - user depresses a mouse button.
  • onMouseMove - user moves the cursor.
  • onMouseOut - cursor leaves an area or link.
  • onMouseOver - cursor moves over an object or area.
  • onMouseUp - user releases a mouse button.
  • onMove - user or script moves a window or frame.
  • onReset - user resets a form.
  • onResize - user or script resizes a window or frame.
  • onSelect - user selects some of the text within a text or textarea field.
  • onSubmit - user submits a form.
  • onUnload - user exits a document.
  • OnLoad Event

    The onLoad event is triggered each time the page is loaded. One technique to determine how many times a user has visited a page would be to write a cookie to the user's computer.

    • [load demo] - Remember you can always view the source code of browser-side JavaScript.
    KeyPoints
    • Place the Onload event in the body tag.
    • Use a function. For example: onLoad="MyFunction();"

    Code example #1:

    <html> 
    <head> 
    <title>JavaScript onload event demo</title> 
    </head>  
    <body onload="alert('Demo of JavaScript onload event.');">  
    This page has JavaScript in the header and uses the OnLoad event.
    </body>
    </html>


    Use JavaScript Identifier
    You can also specify the language when using an event. It's also a good idea and this is the variation we will use for the rest of this article.

    Code Example #2:

    <html> 
    <head> 
    <title>JavaScript onload event demo</title> 
    </head>  
    <body onload="JavaScript:alert('Demo of JavaScript onload event.');">  
    This page has JavaScript in the header and uses the OnLoad event. 
    </body>  
    </html>


    Call a Function
    To do something useful, you usually need to write more then a few lines of code so calling a JavaScript function is more inline with how you will usually use JavaScript. Here is an example:

    Code Example #3:

    <html> 
    <head> 
    <script language="JavaScript"> 
    <!-- 
    function PageStart() 
    {
     alert('Welcome to my page');
    }
    --> 
    </script> 
    </head>
    <body onload="PageStart();">
    This page has JavaScript in the header and uses the OnLoad event.
    </body>  
    </html>

    Use JavaScript Identifier with Functions Too
    As with code example #2, you can specify JavaScript as follows:

    Code Example #4:

    <html> 
    <head> 
    <script language="JavaScript"> 
    <!-- 
    function PageStart() 
    { 
    alert('Welcome to my page'); 
    } 
    --> 
    </script> 
    </head>  
    <body onload="JavaScript:PageStart();">  
    This page has JavaScript in the header and uses the OnLoad event.
    </body>  
    </html>

    Onclick Event

    You can add an OnClick event to almost any visual element of a web page. Common locations include a TD table element and images. For our purposes here, we will use a span tag and make the word ANYTHING display an alert when clicked.

    <html>  
    <body>  
    <p>The word "ANYTHING" text below displays an alert when you click it.</p>  
    <p>Almost <span onclick="alert('Demo of JavaScript onclick event.');">ANYTHING</span> can have an OnClick event added to it.</p>  
    </body>  
    </html>

    What Next?

    Now that you've had a simple introduction to the JavaScript event model, let's put that knowledge to work and learn how to validate a form field.


    Comments

    0 Comments.
    Share a thought or comment...
     
    Write a Comment...
    ...
    Sign in...

    If you are a member, Sign In. Or, you can Create a Free account now.


    Anonymous Post (text-only, no HTML):

    Enter your name and security key.

    Your Name:
    Security key = P1197A1
    Enter key:
    Article Contributed By Mike Prestwood:

    Mike Prestwood is a drummer, an author, and creator of the PrestwoodBoards online community. He is the President & CEO of Prestwood IT Solutions. Prestwood IT provides Coding, Website, and Computer Tech services. Mike has authored 6 computer books and over 1,200 articles. As a drummer, he maintains play-drums.com and has authored 3 drum books. If you have a project you wish to discuss with Mike, you can send him a private message through his PrestwoodBoards home page or call him 9AM to 4PM PST at 916-726-5675 x205.

    Visit Profile

     KB Article #100192 Counter
    14269
    Since 4/2/2008
    -
       Contact Us!
     
    Have a question? Need our services? Contact us now.
    --Mike Prestwood

    Call: 916-726-5675

    email: info@prestwood.com


    Go ahead!   Use Us! Call: 916-726-5675 


    ©1995-2019 Prestwood IT Solutions.   [Security & Privacy]