Difficulty in understanding jQuery's Event Objects

Question

I'm learning jQuery and I stuck in Event Objects I'm not getting this four Event Objects,I've gone through jQuery docs but I'm not getting it perfectly

Where this four Event Object will be in action pratically ?

preventDefault()
isDefaultPrevented()
stopPropagation()
isPropagationStopped()

hoping for quick and positive response..

[My answer here](http://stackoverflow.com/questions/5302903/jquery-event-stopimmediatepropagation-vs-return-false/5302939#5302939) might be worth a read... it does not necessarily answer the question but it provides an overview about what method is doing what. You should also read http://www.quirksmode.org/js/events_order.html — Felix Kling, Jul 08 '11 at 10:13

score 3 · Accepted Answer · answered Jul 08 '11 at 10:13

preventDefault() is used to stop the default action for an event from being fired. For example, if you attached a custom callback to a link's click event, then preventDefault() could prevent that page from opening (perhaps to make an AJAX call?).

stopPropagation() is used to stop an event from bubbling up the DOM to a parent element. For example, if you had a tree menu and you wanted to apply a custom callback to a hover event, but not its parents, you could use this function.

The other two simply check whether the above two have been used yet.

score 3 · Answer 2 · edited May 23 '17 at 12:04

To add to @Pehmolelu's answer and @Jack's:

return false actually does the job of preventDefault() and stopPropagation (but only when you're using jQuery events).

To use the event object you have to pass it in to an event handler:

$("a").click(function(event) {
    event.preventDefault();
    event.stopPropagation();
});

When using jQuery, the below code & the above are equal:

$("a").click(function() {
    //your code here
    return false;
});

This question covers a similar area and should be of help: event.preventDefault() vs. return false

score 2 · Answer 3 · answered Jul 08 '11 at 10:12

2

I dont know them all but you can use preventDefault() in case like this for example:

$(a).click(function(e){
  e.preventDefault();
});

so this would stop the browser from going to the href. It prevents the default action. It would be basically same to just return false also in this case.

EDIT: fixed it to use the event ofcourse :p

answered Jul 08 '11 at 10:12

Pehmolelu

3,534
2
26
31

1

I pretty sure you don't use `this.preventDefault()`, you have to pass in the `event` to the click function, eg: `click(function(e) {})` and then in the function call `e.preventDefault`. – Jack Franklin Jul 08 '11 at 10:13
@Jack Franklin Ah sorry, my mistake. fixed that in edit. +1 :) – Pehmolelu Jul 08 '11 at 10:15

score 2 · Answer 4 · answered Jul 08 '11 at 10:22

To understand those concepts, you should understand the meaning of propagation. Elements in a document are nested in a tree. Consider this example.

What happens if I click the anchor tag? Let's instead of saying click, saying trying to kill the anchor tag.

You try to kill the anchor tag. It tries to defend itself, and by default, it calls for help from his father (the p tag), and p in turn calls for help from his father (the div tag). Now what if anchor is powerful enough to defend itself and stop you killing it (handle you)? Is there any necessity to call for help? No? Then how to stop that default behavior. This is done through e.stopPropagation() for example. Now consider that anchor tag always bites to defend itself. But this time, because you want to kill it, it should use a gun. How to override that biting default behavior? e.preventDefault() is the answer.

Now, let's go back to our main story. When you click an anchor tag, what would be the default behavior of it? It simply follows the link, causing you to leave current page. But sometimes we developers want the anchor tag to respond differently. In other words, sometimes we want to tell it, "hey anchor tag, I know that you always go to another web page, but please, this time don't do that". We achieve this purpose using e.preventDefault() function;

A sample DOM tree

Difficulty in understanding jQuery's Event Objects

4 Answers4