Removing events Stopping an event’s normal behavior

1. The Event Object, Part 2 Removing events Stopping an event’s normal behavior

2. Learning Objectives By the end of this lecture, you should be able to: • Understand what is meant by an event’s default behavior and how to prevent it from occuring. • Tell events whose behavior you have prevented to return to their default behavior

3. Stopping the typical/normal behavior of an event Some events, such as clicking on a hyperlink have ‘preprogrammed’ functionality as their default behavior. For example, clicking on a hyperlink has the functionality of sending a request to a web server for a document or file. Similarly, clicking on a ‘Submit’ button typically triggers submission of a form to a web server. However, we sometimes do not want the typical behavior to be carried out. A common situation is when the user clicks the ‘Submit’ button on a form but have left out, or improperly entered some key piece(s) of data. In this case, we may wish to prevent the submit button from carrying out its default behavior. There are a couple of ways of preventing an event form carrying out its normal (default) behavior. One of which is to use the statement return false; in your script. However, though we may discuss this statement down the road, we will not use it for now. Instead, I would prefer you use the preventDefault() function. Here is a paraphrase of the example from the API: <a href="http://jquery.com">Some hyperlinked text that should go to the jQuery page.</a> <div id="log"></div> <!–- Log the result in this space... --> <script> $( "a" ).click(function( event ) { //The API prefers to use double-quotes (either is fine) event.preventDefault(); //The ‘preventDefault()’ function $( "#log" ).append( "Default " + event.type + " prevented" + "<br>" ); });</script>

4. preventDefault() must be invoked with the ‘event’ object Incidentally, you might be tempted to associate the preventDefault() function directly with the selector like so: $('a').preventDefault(); However, this will not work! The preventDefault() function is actually a part of the event object. In other words, you will invoke preventDefault() within the function that is responsible for handling the event. Note how in the code shown here, the preventDefault() function is invoked from inside the click() function. Also note how we use the event object to invoke the function. We do not use the ‘a’ selector. $( "a" ).click(function( event ) { event.preventDefault(); $( "#log" ).append( "Default " + event.type + " prevented" + "<br>" ); });

5. API docs for function preventDefault() Check out the API docs page for preventDefault() at http://api.jquery.com/event.preventDefault/ You will note that the object ‘event’ precedes the function name. This tells you that the preventDefault() function is invoked using the ‘event’ object.

6. Restoring the default behavior of an event What if you wish to return to the original behavior of an event? For example, suppose you wanted to take the previous situation where all anchor tags were no longer opening a new page, and return their behavior to their default hyperlink behavior? Is there some kind of function called, say, restoreDefault() ? As it happens, there is not. However, there is a function called unbind(). This function is a little more straight-forward to use than the preventDefault() function, in that we can simply use the selector. To use unbind() we begin by applying the selector and then invoke the function like so: $('selector').unbind(); However, that’s not the entire story. Recall that preventDefault() is associated with a specific event such as a click event, or a mouseover event, or a keypress event, and so on. As a result, when using unbind() we must tell the function exactly which event we wish to unbind. The reason is that it is possible to have multiple events associated with a single selector. Reacall our earlier example in which we prevented the default behavior for anchor tags clicking like so: $('a').click(function( event ) { event.preventDefault(); }); Note that we provide two key pieces of information : The selector (green), and the event (red). To unbind, then, we also need to refer to both of these items. We do so as follows: $('a').unbind('click');

7. Example FILE: prevent_restart_default_behavior.htm