I.T. Discussion Community!
-Collapse +Expand
JavaScript
Search JavaScript Group:

Advanced
-Collapse +Expand JavaScript Store

Prestwood eMagazine

April 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 = P1207A1
    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
    14760
    Since 4/2/2008
    -
       Contact Us!
     
    PrestwoodBoards.com was developed and is maintainted by me. Do you have a question or suggestion? Do you see a problem? Contact me now. My goal is to build an ad-free and spam-free source of I.T. information with many contributers (ok to promote your website/company in your bio). Yes, my company Prestwood IT Solutions is mentioned in my bio which shows with every post, but you can contribute and promote your pet project too!

    2,840 People Online Now!!  
    Sign In to see who's online now!  Not a member? Join now. It's free!
    Show more stats...


    ©1995-2019 PrestwoodBoards  [Security & Privacy]
    Professional IT Services: Coding | Websites | Computer Tech