Home arrow JavaScript arrow Page 5 - JavaScript Events
JAVASCRIPT

JavaScript Events


In our last article we left off with a glimpse of JavaScript Events. In this tutorial we are going to go through each one and learn how to use them to create more dynamic web sites. So slap on your seat belts and get your helmets ready. This is gonna be an action-packed episode.

Author Info:
By: James Payne
Rating: 4 stars4 stars4 stars4 stars4 stars / 20
November 26, 2007
TABLE OF CONTENTS:
  1. · JavaScript Events
  2. · OnBlur
  3. · OnChange
  4. · OnClick
  5. · OnDblClick

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
JavaScript Events - OnDblClick
(Page 5 of 5 )

Sometimes you want those slackers viewing your page to get a little exercise. Why have them click once when you can force them to do it twice? Well I am going to show you how to do it:


<html>

<body>


First Name: <input type="text" id="field1" value="James ">

<br />

Last Name: <input type="text" id="field2" value="Payne">

<br /><br />

Full Name: <input type="text" id="field3">

<br /><br />

Click the button below to combine the First and Last Names<br />

<button ondblclick="document.getElementById('field3').value=

document.getElementById('field1').value + document.getElementById('field2').value">Click Me!</button>


</body>

</html>

Look familiar? That’s because it is. All I did was change the word onclick to ondblclick. Done. Though technically I don’t think those are words. But whatever.

Supporting HTML Tags: <a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supporting Javascript Objects: document, link

We could also mix the single and double click events if we wanted to. And let’s face it, you know you want to.

Behold the complex code!


<html>

<body>


First: <input type="text" id="First" value="James">

<br />

Last: <input type="text" id="Last" value="Bond ">

<br /><br />

Full: <input type="text" id="full"><br /><br />

<button ondblclick="document.getElementById('full').value=

document.getElementById('last').value + document.getElementById('first').value">Double Click</button>

<br /><br />


First Name: <input type="text" id="field4" value="James ">

<br />

Last Name: <input type="text" id="field5" value="Payne">

<br /><br />

Full Name: <input type="text" id="field6">

<br /><br />

<button onclick="document.getElementById('field6').value=

document.getElementById('field4').value + document.getElementById('field5').value">Single Click</button>


</body>

</html>

The above code combines our previous two examples, allowing users to single click and double click.

Well that’s all for this episode. In the next tutorial we will cover some more JavaScript events. I hope this tutorial was helpful.

Till then…


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks
- Dynamic jQuery Styling

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 4 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials