Difficulty in understanding jQuery's Event Objects

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()

开发者_JS百科

hoping for quick and positive response..

---

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.

---

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

---

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

---

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;