Removing events

1
The Event Object, Part 2

• Removing events
• Stopping an events normal behavior

2
Learning Objectives

• By the end of this lecture, you should be able
  to
• Understand what is meant by an events 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
• lta href"http//jquery.com"gtSome hyperlinked text
  that should go to the jQuery page.lt/agt
• ltdiv id"log"gtlt/divgt lt! Log the result in this
  space... --gt
• ltscriptgt
• ( "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" "ltbrgt" )
• )lt/scriptgt

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" "ltbrgt" )
• )

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, thats 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