How to use zjrJS.Doc.aE() ("add event listener")
Used zjrJS Version:
Stable Minified version 20141202t2322 of zjrJS.
There is no newer Beta version available.
Declaration
Goal
A cross-browser method to add / attach event listeners to elements. aE() ensures listeners exist only once for the Target, removing any doubles. It negates the difference between standards compliant and stubborn browsers, with a fallback for older browsers that lack a standardized DOM.
Typical usage
After getting a handle on an element, specify to which events it should react to what functions. Can be used multiple times, if necessary, to allow for several actions on the same event on the same element.
Member Type
Function.
Value Type
Object (the Target HtmlElement).
Parameters
HtmlElement Target: the element (either generated (Doc.cE() or document.createElement()) or retrieved (Doc.eid() or document.getElementByID() etc.)) which should start listening to te specified event.
String eventName: any valid lowercase event name, like "load", "click", "mouseover", and "focus". Notice that event names reflect their HTML counterparts, omitting the "on" prefix. For instance, if in HTML you'd specify an onFocus handler, the event name is "focus".
function: preferably a reference to a function specified elsewhere, but an inline function created there and then is allowed as well. Note that a function reference is its name, as one would call the function, but without parentheses () and without arguments. If you want to delete your event listeners later on (which, arguably, may help garbage collection), we advise you to prefer pre-declared functions, or a two-step listener registration.
Dependencies
zjrJS.Doc.dE()
Example with inline function
Example with declared function
zjrJS.Doc.aE(HtmlElement Target, String eventName, function)Goal
A cross-browser method to add / attach event listeners to elements. aE() ensures listeners exist only once for the Target, removing any doubles. It negates the difference between standards compliant and stubborn browsers, with a fallback for older browsers that lack a standardized DOM.
Typical usage
After getting a handle on an element, specify to which events it should react to what functions. Can be used multiple times, if necessary, to allow for several actions on the same event on the same element.
Member Type
Function.
Value Type
Object (the Target HtmlElement).
Parameters
HtmlElement Target: the element (either generated (Doc.cE() or document.createElement()) or retrieved (Doc.eid() or document.getElementByID() etc.)) which should start listening to te specified event.
String eventName: any valid lowercase event name, like "load", "click", "mouseover", and "focus". Notice that event names reflect their HTML counterparts, omitting the "on" prefix. For instance, if in HTML you'd specify an onFocus handler, the event name is "focus".
function: preferably a reference to a function specified elsewhere, but an inline function created there and then is allowed as well. Note that a function reference is its name, as one would call the function, but without parentheses () and without arguments. If you want to delete your event listeners later on (which, arguably, may help garbage collection), we advise you to prefer pre-declared functions, or a two-step listener registration.
Dependencies
zjrJS.Doc.dE()
Example with inline function
<script type="text/javascript" src="zjrJS.version.js" id="zjrJS"></script>
<script type="text/javascript">/* <![CDATA[ */
//add a load event listener to the window object, supplying an inline function
zjrJS.Doc.aE(window, "load", function(){
zjrJS.Debug.mode=1;
zjrJS.Debug.alert("Hello, world!");
});
/* ]]> */</script>
Example with declared function
<script type="text/javascript" src="zjrJS.version.js" id="zjrJS"></script>
<script type="text/javascript">/* <![CDATA[ */
//define a function
function sayHello(){
zjrJS.Debug.mode=1;
zjrJS.Debug.alert("Hello, world!");
}
//add a load event listener to the window object, supplying a reference to a previously declared function
zjrJS.Doc.aE(window, "load", sayHello);
/* ]]> */</script>