Details
-
Type:
Improvement
-
Status: Done/Fixed
-
Priority:
Minor
-
Resolution: Fixed/Completed
-
Affects Version/s: None
-
Fix Version/s: Unscheduled
-
Component/s: None
-
Labels:None
Description
Going forward we should eliminate/deprecate use of element level event handling and implement DOM Event Handling (for any cases where we don't just replace w/ Ajax functionality)...
DOM Event Handling
=================
The idea is you separate out your js from your xhtml, just like css separates out display markup. It looks a lot more complicated, but it's really a lot cleaner and more modular. There's more complex code that handles older browsers, but this is the basic idea.
Existing approach "old school" (s/b replaced as possible):
<input id="street" type="text" onChange="this.value = this.value.toUpperCase();">
--------------
New method:
<input id="street" type="text">
Now we can move the event listener and the action(function) to be called into the <head> tag. Note that the event is now called 'change' rather than 'onChange'.
<script type="text/javascript">
function uppercaseListener() {
this.value = this.value.toUpperCase();
}
function installListeners() {
var element = document.getElementById('street');
element.addEventListener('change', uppercaseListener, false);
}
window.addEventListener('load', installListeners, false);
</script>