New - Pastie

Language:

## mark a section (Learn more)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>events_1</title> </head> <body> <h1>Making stuff happen: the simple example</h1> <h2>Inline event registration - works in all browsers since Netscape 2 (Don't use it)</h2> <a href="nowhere.html" onclick="alert('I was clicked'); return false;">Click me</a>  <h2>Setting an event handler directly in JavaScript</h2> <a href="nowhere2.html" id="link2">Click me</a> <script type="text/javascript" charset="utf-8"> // this demonstrates a cross-browser programtic way of registering an event. // The biggest drawback with setting an event handler directly is that it clobbers any other event handlers previously defined in the same way var link2 = document.getElementById("link2"); link2.onclick = function(e) { alert("Link 2 was clicked"); return false; } </script> <h1>Event bubbling / capturing</h1> <p> Events don't live in a vacuum, so if you click on a page with just one div, a click event will fire for the div and the document containing it. The order that those events happen in is either Bubbling (start at the element and move upwards) or Capture (from the highest element down to the element that caused the event) </p> <p> In IE, events always bubble. The W3C specification for Events lets your choose in which order you'd like to observe events. </p> <div id="wrap"> <div id="inner_div">Click me for event bubbling</div> </div> <script type="text/javascript" charset="utf-8"> document.getElementById("inner_div").addEventListener("click", function(e) { alert("Link clicked"); }, false); document.getElementById("wrap").addEventListener("click", function(e) { alert("Div clicked"); }, false); </script> <div id="wrap2"> <div id="inner_div2">Click me for event capture</div> </div> <script type="text/javascript" charset="utf-8"> document.getElementById("inner_div2").addEventListener("click", function(e) { alert("Link clicked"); }, true); document.getElementById("wrap2").addEventListener("click", function(e) { alert("Div clicked"); }, true); </script> </body> </html>