This sample gives a few examples of how to add and remove event listeners with the Spry.Utils.addEventListener() and Spry.Utils.removeEventListener() functions.
First the basics. To add an event listener to an element on your page, define a listener function (aka handler function), and then call Spry.Utils.addEventListener() to attach it:
<script src="../../includes/SpryDOMUtils.js" type="text/javascript" language="javascript"></script>
...
<div id="myDiv">Click me!</div>
...
<script type="text/javascript>
function myClickHandler(event)
{
alert("myClickHandler was called!");
}
Spry.Utils.addEventListener("myDiv", "click", myClickHandler, false);
</script>
A couple of important things to note about you handler function is that when it is invoked, the 'this' reference within your function will be the actual DOM element the handler was attached to with the addEventListener call. Also, for IE, the event object passed into your handler has the W3C standard stopPropagation() and preventDefault() methods defined on it, so you no longer have to set the proprietary IE equivalents. Some examples of how the value you return from your handler and calls to stopPropagation() and/or preventDefault() effect processing, can be seen below.
Another thing to note, is that if you call addEventListener() to attach the same listener function to the same element, for the same event type, repeatedly, the handler will still only be invoked once.
To remove an event listener from an element, simply call Spry.Utils.removeEventListener() with the exact same arguments you used when you called Spry.Utils.addEventListener():
<script type="text/javascript>
Spry.Utils.removeEventListener("myDiv", "click", myClickHandler, false);
</script>
In the following example, different event listeners are attached to each link in the list. Click on the links to see how the different types of handlers effect the processing of the link. To remove the event handlers on the links, press the "Remove Event Handlers" button. To add them back, press the "Add Event Handlers" button.
Event handlers are *NOT* active!
The handler on this link looks like this:
function Handler1(evt)
{
alert(this.id + " was clicked!");
}
Since this handler does *NOT* return a false value, or call stopPropagation() on the event, clicking on "Link #1" above should cause 2 alerts to pop up, one from Handler1() and the other from the listener that is on the <list>. Also, since Handler1() does not call preventDefault() on the event object, the browser should execute the default action for the link, which in this case causes the browser to load the URL "add_event_listener.html#link1". The URL displayed by the browser should then reflect this new URL.
The handler on this link looks like this:
function Handler2(evt)
{
alert(this.id + " was clicked!");
return false;
}
Since this handler returns a value of false, propagation of this event is stopped and the default action for the event is prevented. This means that when you click on "Link #2" above, you should only see a single alert pop up from Handler2(). The URL displayed by the browser should be exactly the same as it was prior to you clicking on "Link #2".
The handler on this link looks like this:
function Handler3(evt)
{
alert(this.id + " was clicked!");
evt.stopPropagation();
evt.preventDefault();
}
Since this handler manually calls stopPropagation() and preventDefault() on the event and returns *NO* value at all, propagation of this event is stopped and the default action for the event is prevented. This means that when you click on "Link #3" above, you should only see a single alert pop up from Handler3(). The URL displayed by the browser should be exactly the same as it was prior to you clicking on "Link #3". Handler3() is functionally equivalent to Handler2().
The handler on this link looks like this:
function Handler4(evt)
{
alert(this.id + " was clicked!");
evt.stopPropagation();
}
Since this handler manually calls stopPropagation() on the event and returns *NO* value at all, propagation of this event is stopped. This means that when you click on "Link #4" above, you should only see a single alert pop up from Handler4(). Also, since Handler4() does not call preventDefault() on the event object, the browser should execute the default action for the link, which in this case causes the browser to load the URL "add_event_listener.html#link4". The URL displayed by the browser should then reflect this new URL.
The handler on this link looks like this:
function Handler5(evt)
{
alert(this.id + " was clicked!");
evt.preventDefault();
}
Since this handler manually calls preventDefault() on the event and returns *NO* value at all, the default action for the link is prevented. This means that when you click on "Link #5" above, 2 alerts will pop up, one from Handler1() and the other from the listener that is on the <list>. Since the default action for the link is prevented, the URL displayed by the browser should be exactly the same as it was prior to you clicking on "Link #5".