ondblclick JavaScript (JS) Example: HTML DOM Objects – Event – ondblclick JavaScript (JS) Example

Posted by asp.net videos on Sunday, February 21, 2010 · Leave a Comment

Premium .NET Training Video Tutorials

Other Premium Videos Tutorials

ondblclick JavaScript (JS) Example: HTML DOM Objects – Event – ondblclick JavaScript (JS) Example

Purpose: – Illustrates the JavaScript syntax for the ondblclick Event.

View Other Attributes and Handlers for DOM Events

Prerequistes:

Install Visual Web Developer 2008

Syntax: Object.ondblclick="yourjavascriptcode()" – Allows you to know when double click event occurs.

Restrictions: None

Notes:

You can build your own library of syntax examples by using same web site over and over and just add new files to it.

Instructions:

Use Visual Web Developer 2008
Create new web site;
- Click File/New Web Site
- Select ASP.NET Website Template
- Select C-Sharp for language
- name of Web Site could be JavaScript_Syntax.

Folder

Add New folder named "HTMLDOMObjects"
- Right-click project name in solution explorer;
- add new folder;
- name of folder should be: HTMLDOMObjects
Add New subfolder to "HTMLDOMObjects" folder named "DOMEvent"
- Right-click folder named "HTMLDOMObjects" in solution explorer;
- add new folder;
- name of folder should be: DOMEvent
Add New subfolder to "DOMEvent" subfolder named "EventHandlers"
- Right-click subfolder named "DOMEvent" in solution explorer;
- add new folder;
- name of folder should be: EventHandlers
Add HTML Page Named ondblclick to EventHandlers subfolder
- Right-click EventHandlers subfolder;
- add new item;
- Select HTML Page
- HTML Page name should be ondblclick
Click on copy code in code below to copy code into HTML Page ondblclick.htm
Right-click on HTML page ondblclick.htm and select view in browser

View Example In Browser

 HTML |   copy code | ?  
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<head>
<title>IdealProgrammer.com: ondblclick </title>
 
<!-- 
***************************************************
* This example is from http://idealprogrammer.com *
***************************************************
*****************************************************
 DOM Objects
*****************************************************
 
 
*****************************************************
***    DOM Event - EventHandlers   ***
*****************************************************
 
*****************************************************
*** ondblclick                                       
*****************************************************
 
SYNTAX:
object.ondblclick="yourjavascriptcode()"  Allows you to know when double-click
event occurs
 
=================================================================
An EXCELLENT tutorial on event basics can be found at:
http://www.quirksmode.org/js/introevents.html
=================================================================
 
You can access the following properties thru the event handler:
 
Available Properties
altKey	     Retrieves a value that indicates the state of the ALT key.
altLeft      Retrieves a value that indicates the state of the left ALT key.
clientX	     Sets or retrieves the x-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.
clientY	     Sets or retrieves the y-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.
ctrlLeft	 Sets or retrieves the state of the left CTRL key.
offsetX	     Sets or retrieves the x-coordinate of the mouse pointer's position relative to the object firing the event.
offsetY	     Sets or retrieves the y-coordinate of the mouse pointer's position relative to the object firing the event.
returnValue	 Sets or retrieves the return value from the event.
screenX	     Sets or retrieves the x-coordinate of the mouse pointer's position relative to the user's screen.
screenY	     Sets or retrieves the y-coordinate of the mouse pointer's position relative to the user's screen.
shiftLeft	 Retrieves the state of the left SHIFT key.
srcElement	 Sets or retrieves the object that fired the event.
type	     Sets or retrieves the event name from the event object.
x	         Sets or retrieves the x-coordinate (in pixels) of the mouse pointer's offset from the closest relatively positioned parent element of the element that fired the event.
y	         Sets or retrieves the y-coordinate (in pixels) of the mouse pointer's offset from the closest relatively positioned parent element of the element that fired the event.
 
 
The captureEvents() method captures all the events of the event type passed.
 
When you have multiple events to capture, separate them with the pipe, |, character.
 
Here are the types of event you can capture:
 
Event.ABORT
Event.BLUR
Event.CHANGE
Event.CLICK
Event.DBLCLICK
Event.DRAGDROP
Event.ERROR
Event.FOCUS
Event.KEYDOWN
Event.KEYPRESS
Event.KEYUP
Event.LOAD
Event.MOUSEDOWN
Event.MOUSEMOVE
Event.MOUSEOUT
Event.MOUSEOVER
Event.MOUSEUP
Event.MOVE
Event.RESET
Event.RESIZE
Event.SELECT
Event.SUBMIT
Event.UNLOAD
 
 
-->
<script type="text/javascript">
 
 
 
// Arrays of possible properties
 
var theTargets = new Array(
	'target',
	'relatedTarget',
	'currentTarget',
	'originalTarget',
	'srcElement',
	'fromElement',
	'toElement'
);
 
var theMouse = new Array(
	'clientX',
	'clientY',
	'x',
	'y',
	'layerX',
	'layerY',
	'screenX',
	'screenY',
	'offsetX',
	'offsetY',
	'pageX',
	'pageY',
	'which',
	'button',
	'detail',
	'wheelDelta'
);
 
var theKeys = new Array(
	'modifiers',
	'which',
	'keyCode',
	'charCode',
	'isChar',
	'shiftKey',
	'shiftLeft',
	'metaKey',
	'altKey',
	'altLeft',
	'ctrlKey',
	'ctrlLeft'
);
 
var theType = new Array(
	'type',
	'eventPhase',
	'bubbles',
	'cancelable',
	'cancelBubble',
	'detail',
	'returnValue',
	'timeStamp',
	'view'
);
 
 
function writeAvailableProperties() {
    document.write(event.altkey + " - altKey	     Retrieves a value that indicates the state of the ALT key.<br />");
    document.write(event.clientX + " - clientX	     Sets or retrieves the x-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.<br /><div style='background-color:Yellow;border-color:black;border-style:solid;border-width:1px;'> Please use browser back button to return to previous page</div><br /><br />");
}
function doSomething(e) {
    if (!e) var e = window.event
    // e refers to the event
    var string = printInfo(e);
	alert(string);
 
}
 
 
 
 
// Print out property information based on user checking of form
 
function printInfo(e)
{
	var printstring = '';
	if (this.id) printstring +=	'Event is now in layer ' + this.id + '\n\n';
	var possibilities = document.forms[0].elements;
	for (var i=0;i<possibilities .length;i++)
	{
		if (possibilities[i].checked)
		{
			var thearray = self[possibilities[i].name];
			for (var j=0;j<thearray.length;j++)
			{
				var current = e[thearray[j]];
				var curr = typeof current;
//				alert(thearray[j] + ' is ' + curr);
				if (curr == 'undefined' || (curr == 'object' && !current)) continue;
				if (possibilities[i].name == 'theTargets')
				{
					var tag = (current.tagName) ? current.tagName : '[unknown tag]';
					var tagid = (current.id) ? current.id : '[no id]';
					printstring += '\n' + thearray[j] + ' = ' + tag + ' ' + tagid;
 
				}
				else
					printstring += '\n' + thearray[j] + ' = ' + current;
 
			}
		}
	}
	if (!printstring) printstring = 'Alert required for example\nUse checkboxes to see useful information';
	return printstring;
}
 
 
 
</script>
 
 
</possibilities></script></head>
<body>
<h2>Example #1: Check the categories and double click button to see ondblclick Attributes</h2>
 
<form>Show
<input type="checkbox" name="theType"/> type/misc
<input type="checkbox" name="theTargets"/> targets
<input type="checkbox" name="theMouse"/> mouse stuff
<input type="checkbox" name="theKeys"/> key stuff
</form>
 
<br />
<br />
 
<input id="Button1" type="button" value="double click me" />
 
<script type="text/javascript">
 
// This is the "traditional" and recommended technique for registering an event
// handler because it allows you to separate structure from behavior; the
// "inline" method of registering an event within xhtml tags is not
// the recommended approach because it blurs structure and behavior.
// For complete explanation, please see the following excellent article:
// http://www.digital-web.com/articles/separating_behavior_and_structure_2/
//
// Note: Using getElementById so registering event will work in FireFox
//
var mybutton = document.getElementById("Button1")
mybutton.ondblclick = doSomething;
if (mybutton.captureEvents) mybutton.captureEvents(Event.CLICK);
</script>  
<hr />
 
<h2>Example #2: Double click button Below to See ondblclick Copy Example</h2>
 
FieldA: <input type="text" id="fieldA" value="Copy Me!" />
<br />
FieldB: <input type="text" id="fieldB" />
<br /><br />
Click the button below to copy the content of FieldA to FieldB.
<br />
<button ondblclick="document.getElementById('fieldB').value=
document.getElementById('fieldA').value">Double Click to Copy</button>
 
 
 
 
</body>
 
</html>

onBlur JavaScript (JS) Example: HTML DOM Objects – Event – onBlur JavaScript JS Example onBlur JavaScript (JS) Example HTML DOM Objects Event...
onunload JavaScript (JS) Example: HTML DOM Objects – Event – onunload JavaScript (JS) Example onunload JavaScript (JS) Example: HTML DOM Objects - Event -...
onChange JavaScript (JS) Example: HTML DOM Objects – Event – onChange JavaScript (JS) Example onChange JavaScript (JS) Example: HTML DOM Objects - Event -...
onreset JavaScript (JS) Example: HTML DOM Objects – Event – onreset JavaScript (JS) Example onreset JavaScript (JS) Example: HTML DOM Objects - Event -...
onsubmit JavaScript (JS) Example: HTML DOM Objects – Event – onsubmit JavaScript (JS) Example onsubmit JavaScript (JS) Example: HTML DOM Objects - Event -...

Related posts brought to you by Yet Another Related Posts Plugin.

Filed under Uncategorized · Tagged with Event, example, HTML DOM Objects, JS, ondblclick JavaScript

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!

WP-Hashcash by Elliott Back protects you from spam. Please enable javascript and reload this page to add your comment.

.NET	.NET Programming (C# or VB) (Web or Desktop)
Key Supporting Languages	HTML	CSS	JavaScript	SQL Server

Access	AJAX	ASP	Blogging	ColdFusion
Expression Blend	mySQL	Perl	PHP	Ruby
SEO	SharePoint	Silverlight	Web Design	Web Dev

ondblclick JavaScript (JS) Example: HTML DOM Objects – Event – ondblclick JavaScript (JS) Example

ondblclick JavaScript (JS) Example: HTML DOM Objects – Event – ondblclick JavaScript (JS) Example

Speak Your Mind

.Sponsored Links

Code Samples

Categories

Archives