Listing 3. test-3.html, All JavaScript Removed and Placed in atf-events.js
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Unobtrusive JavaScript</title>
<h1>Unobtrusive JavaScript</h1> <script text="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/ *1.6.0.2/prototype.js"></script>
<script text="text/javascript" src="atf-events.js"></script>
<p>A <a href="http://www.nytimes.com" id="hyperlink">hyperlink</a> to The New York Times.</p>
<form method="POST" action="/action" id="the_form">
<input type="text" name="text_field" id="text_field" /> <input type="submit" value="Submit the form" id="submit_button" /> </form>
Listing 4. atf-events.js, Broken JavaScript Code for test-3.html function show_x_and_y(event) { alert(event.pageX + ", " + event.pageY); return false;
$('hyperlink').onmouseover = function() { $('the_form').hide(); } $('hyperlink').onmouseout = function() { $('the_form').show(); }
$('hyperlink').onmouseover = function() { $('the_form').hide(); } $('hyperlink').onmouseout = function() { $('the_form').show(); }
|
Listing 5. atf-events-2.js, JavaScript Code for test-3.html |
Was this article helpful?
Post a comment