eventPhase JavaScript (JS) Example: HTML DOM Objects – Other Event Attributes – eventPhase JavaScript (JS) Example
eventPhase JavaScript (JS) Example: HTML DOM Objects – Other Event Attributes – eventPhase JavaScript (JS) Example
Purpose: – Illustrates the JavaScript syntax for the eventPhase Event Attribute.
Prerequistes:
- Install Visual Web Developer 2008
Syntax: event.eventPhase – returns the eventPhase. This does not work in IE.
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.
- 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 “OtherEventAttributes”
- Right-click subfolder named “DOMEvent” in solution explorer;
- add new folder;
- name of folder should be: OtherEventAttributes
- Add HTML Page Named eventPhase to OtherEventAttributes subfolder
- Right-click OtherEventAttributes subfolder;
- add new item;
- Select HTML Page
- HTML Page name should be eventPhase
- Click on copy code in code below to copy code into HTML Page eventPhase.htm
- Right-click on HTML page eventPhase.htm and select view in browser
< !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: eventPhase </title>
<meta name="description" content="eventPhase JavaScript (JS) Example:
HTML DOM Objects - Event - shiftKey JavaScript (JS) Example" />
<meta name="keywords" content="example,javascript,js,eventPhase,code samples" />
<!--
***************************************************
* This example is from http://idealprogrammer.com *
***************************************************
*****************************************************
DOM Objects
*****************************************************
*****************************************************
*** DOM Event - Other Event Attributes ***
*****************************************************
*****************************************************
*** eventPhase
*****************************************************
SYNTAX:
event.eventPhase returns the element that triggered the event
Does not work in IE, but you can use srcElement
=================================================================
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 for example 1 -->
<script type="text/javascript">
function GetPhase(event, tagNamex) {
if (event.eventPhase === undefined) { // Internet Explorer
writeData("Your browser does not support this example!");
return;
}
switch (event.eventPhase) {
case Event.CAPTURING_PHASE:
writeData("The event flow is in the capturing phase. (" + tagNamex + ")");
break;
case Event.AT_TARGET:
writeData("The event flow is in the target phase. (" + tagNamex + ")");
break;
case Event.BUBBLING_PHASE:
writeData("The event flow is in the bubbling phase. (" + tagNamex + ")");
break;
}
}
function Init() {
// Captures the click event
if (document.body.addEventListener) {
document.body.addEventListener('click', OnCapturedClick, true);
}
}
function OnCapturedClick(event) {
GetPhase(event, "body");
}
//javascript used by both examples
function writeData(msg) {
msgs.innerHTML += msg + '<br />';
}
function removeMsgsNow() {
msgs.innerHTML = '';
}
</script>
<style type="text/css">
#msgs {
width: 250px;
height: 300px;
overflow: auto;
border: 1px solid #2EB2DC;
}
</style>
</head>
<body id="idBody" onload="Init();" onclick="GetPhase(event, 'body');">
<center><a href="http://myqol.com">Progress Monitor has 100s of Code Samples and
Video Tutorials</a></center>
<h2>Example #1: Demonstrates detecting eventPhase</h2>
<p>This example demonstrates how to detect eventPhase)</p>
Example One: <button id="idExampleOneButton" onclick="GetPhase(event, 'button')" >Display event phase!</button>
<br />
<br />
---Messages for both examples follow---<br />
<button id="removeMsgs">Remove messages</button>
<p id="msgs"></p>
<script type="text/javascript">
//javascript used by both examples
var msgs = document.getElementById("msgs");
var removeMsgs = document.getElementById("removeMsgs")
removeMsgs.onclick = removeMsgsNow;
</script>
</body>
</html> |
