ch07-04a.html 1.42 KB
Newer Older
O'Reilly Media, Inc.'s avatar
O'Reilly Media, Inc. committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Event Handling</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[

function stopEvent(evnt) {
   if (evnt.stopPropagation) {  
     evnt.stopPropagation();
   } else {
     evnt.cancelBubble = true;
   }
}

// set up event handlers for div elements
window.onload=setupEvents;

function setupEvents() {

   document.getElementById("first").onmousedown=mouseDown;

   // second element event handler functionality
   document.getElementById("second").onmousedown=function () {
      alert("Second event handler");
   }
}


// assigned to first div element
function mouseDown(nsEvent) {
  var theEvent = nsEvent ? nsEvent : window.event;
  var locString = "X = " + theEvent.screenX + " Y = " + theEvent.screenY;
  var theSrc = theEvent.target ? theEvent.target : theEvent.srcElement;
  alert(locString + " " + theSrc);
  stopEvent(theEvent);
}

// and document
document.onmousedown=function (evnt) {
   var theEvnt = evnt? evnt : window.event;
   alert(theEvnt.type);
}

//]]>
</script>
</head>
<body>
<div id="first" style="padding: 20px; background-color: #ff0; width: 150px; ">
   <div id="second" style="background-color: #f00; width: 100px; height: 100px; border: 1px dashed #000">
   </div>
</div>
</body>
</html>