By default, most events bubble up from the original event target to the document element. At each element along the way, jQuery calls any matching event handlers that have been attached. A handler can prevent the event from bubbling further up the document tree (and thus prevent handlers on those elements from running) by calling event.stopPropagation(). Any other handlers attached on the current element will run however. To prevent that, call event.stopImmediatePropagation(). (Event handlers bound to an element are called in the same order that they were bound.)
Similarly, a handler can call event.preventDefault() to cancel any default action that the browser may have for this event; for example, the default action on a click event is to follow the link. Not all browser events have default actions, and not all default actions can be canceled. See the W3C Events Specification for details.
Returning false from an event handler will automatically call event.stopPropagation() and event.preventDefault(). A false value can also be passed for the handler as a shorthand for function(){ return false; }. So, $( "a.disabled" ).on( "click", false ); attaches an event handler to all links with class "disabled" that prevents them from being followed when they are clicked and also stops the event from bubbling.
false from an event handler in jQuery differ from returning false from a native event handler (element.addEventListener("click", function () { return false; })) in that jQuery calls event.preventDefault() and event.stopPropagation() and a native event handler only calls event.preventDefault().When jQuery calls a handler, the this keyword is a reference to the element where the event is being delivered; for directly bound events this is the element where the event was attached and for delegated events this is an element matching selector. (Note that this may not be equal to event.target if the event has bubbled from a descendant element.) To create a jQuery object from the element so that it can be used with jQuery methods, use $( this ).
If a data argument is provided to .on() and is not null or undefined, it is passed to the handler in the event.data property each time an event is triggered. The data argument can be any type, but if a string is used the selector must either be provided or explicitly passed as null so that the data is not mistaken for a selector. Best practice is to use a plain object so that multiple values can be passed as properties.
By default, most events bubble up from the original event target to the document element. At each element along the way, jQuery calls any matching event handlers that have been attached. A handler can prevent the event from bubbling further up the document tree (and thus prevent handlers on those elements from running) by calling event.stopPropagation(). Any other handlers attached on the current element will run however. To prevent that, call event.stopImmediatePropagation(). (Event handlers bound to an element are called in the same order that they were bound.)
Similarly, a handler can call event.preventDefault() to cancel any default action that the browser may have for this event; for example, the default action on a click event is to follow the link. Not all browser events have default actions, and not all default actions can be canceled. See the W3C Events Specification for details.
Returning false from an event handler will automatically call event.stopPropagation() and event.preventDefault(). A false value can also be passed for the handler as a shorthand for function(){ return false; }. So, $( "a.disabled" ).on( "click", false ); attaches an event handler to all links with class "disabled" that prevents them from being followed when they are clicked and also stops the event from bubbling.
false from an event handler in jQuery differ from returning false from a native event handler (element.addEventListener("click", function () { return false; })) in that jQuery calls event.preventDefault() and event.stopPropagation() and a native event handler only calls event.preventDefault().false from an event handler in jQuery differ from returning false in a native event handler (element.addEventListener("click", function () { return false; })) in that jQuery calls event.preventDefault() and event.stopPropagation() and a native event handler only calls event.preventDefault().When jQuery calls a handler, the this keyword is a reference to the element where the event is being delivered; for directly bound events this is the element where the event was attached and for delegated events this is an element matching selector. (Note that this may not be equal to event.target if the event has bubbled from a descendant element.) To create a jQuery object from the element so that it can be used with jQuery methods, use $( this ).
If a data argument is provided to .on() and is not null or undefined, it is passed to the handler in the event.data property each time an event is triggered. The data argument can be any type, but if a string is used the selector must either be provided or explicitly passed as null so that the data is not mistaken for a selector. Best practice is to use a plain object so that multiple values can be passed as properties.
In other words, explicitly calling .off() from within a regularly-bound handler has exactly the same effect.
If the first argument contains more than one space-separated event types, the event handler is called once for each event type.
+false from an event handler in jQuery differ from returning false in a native event handler (element.addEventListener("click", function () { return false; })) in that jQuery calls event.preventDefault() and event.stopPropagation() and a native event handler only calls event.preventDefault()..live() method supports custom events as well as all JavaScript events that bubble. It also supports certain events that don't bubble, including change, submit, focus and blur.click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.false from an event handler in jQuery differ from returning false in a native event handler (element.addEventListener("click", function () { return false; })) in that jQuery calls event.preventDefault() and event.stopPropagation() and a native event handler only calls event.preventDefault().The handler callback function can also take parameters. When the function is called, the event object will be passed to the first parameter.
The event object is often unnecessary and the parameter omitted, as sufficient context is usually available when the handler is bound to know exactly what needs to be done when the handler is triggered. However, at times it becomes necessary to gather more information about the user's environment at the time the event was initiated. View the full Event Object.
Returning false from a handler is equivalent to calling both .preventDefault() and .stopPropagation() on the event object.
false from an event handler in jQuery differ from returning false in a native event handler (element.addEventListener("click", function () { return false; })) in that jQuery calls event.preventDefault() and event.stopPropagation() and a native event handler only calls event.preventDefault().Using the event object in a handler looks like this:
$( document ).ready(function() {
From 2914e3cf82e8338a7d2e5339789b24aa673a974c Mon Sep 17 00:00:00 2001
From: phistuck
Date: Sat, 14 Jun 2014 20:01:32 +0300
Subject: [PATCH 06/10] Added a standards divergence warning to delegate.xml
Returning false in jQuery event handlers stops the propagation of the event, while returning false in native event listeners only prevents the default.
---
entries/delegate.xml | 1 +
1 file changed, 1 insertion(+)
diff --git a/entries/delegate.xml b/entries/delegate.xml
index dd57ffee..6738ffbb 100644
--- a/entries/delegate.xml
+++ b/entries/delegate.xml
@@ -64,6 +64,7 @@ $( "table" ).on( "click", "td", function() {
Passing and handling event data works the same way as it does for .on().
false from an event handler in jQuery differ from returning false in a native event handler (element.addEventListener("click", function () { return false; })) in that jQuery calls event.preventDefault() and event.stopPropagation() and a native event handler only calls event.preventDefault().
Click a paragraph to add another. Note that .delegate() attaches a click event handler to all paragraphs - even new ones.
As of jQuery 1.4 the .live() method supports custom events as well as all JavaScript events that bubble. It also supports certain events that don't bubble, including change, submit, focus and blur.
In jQuery 1.3.x only the following JavaScript events could be bound: click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.
- Note: the consequences of returning false from an event handler in jQuery differ from returning false in a native event handler (element.addEventListener("click", function () { return false; })) in that jQuery calls event.preventDefault() and event.stopPropagation() and a native event handler only calls event.preventDefault().
Cancel a default action and prevent it from bubbling up by returning false.
From 586b0e7ae0017cbb34890f100ac1c63ff3b8bea7 Mon Sep 17 00:00:00 2001
From: phistuck
Date: Sat, 14 Jun 2014 20:05:49 +0300
Subject: [PATCH 08/10] Added a standards divergence warning to live.xml
Returning false in jQuery event handlers stops the propagation of the event, while returning false in native event listeners only prevents the default.
---
entries/live.xml | 1 +
1 file changed, 1 insertion(+)
diff --git a/entries/live.xml b/entries/live.xml
index 95f9d5d8..52b2b424 100644
--- a/entries/live.xml
+++ b/entries/live.xml
@@ -73,6 +73,7 @@ $( document ).on( "click", "a.offsite", function() {
As of jQuery 1.4 the .live() method supports custom events as well as all JavaScript events that bubble. It also supports certain events that don't bubble, including change, submit, focus and blur.
In jQuery 1.3.x only the following JavaScript events could be bound: click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.
+ Note: the consequences of returning false from an event handler in jQuery differ from returning false in a native event handler (element.addEventListener("click", function () { return false; })) in that jQuery calls event.preventDefault() and event.stopPropagation() and a native event handler only calls event.preventDefault().
Cancel a default action and prevent it from bubbling up by returning false.
From 22e00d3549a148c3efbe3bd3262588162c066737 Mon Sep 17 00:00:00 2001
From: phistuck
Date: Sat, 14 Jun 2014 20:09:01 +0300
Subject: [PATCH 09/10] Added a standards divergence warning to submit.xml
Returning false in jQuery event handlers stops the propagation of the event, while returning false in native event listeners only prevents the default.
Additionally, clarify somewhere else that return false does more than just .preventDefault().
---
entries/submit.xml | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/entries/submit.xml b/entries/submit.xml
index 38ee1f06..2c0f69ae 100644
--- a/entries/submit.xml
+++ b/entries/submit.xml
@@ -44,7 +44,7 @@ $( "#target" ).submit(function( event ) {
event.preventDefault();
});
Now when the form is submitted, the message is alerted. This happens prior to the actual submission, so we can cancel the submit action by calling .preventDefault() on the event object or by returning false from our handler. We can trigger the event manually when another element is clicked:
Now when the form is submitted, the message is alerted. This happens prior to the actual submission, so we can cancel the submit action by calling .preventDefault() on the event object or by returning false (which will additionally implicitly call .stopPropagation()) from our handler. We can trigger the event manually when another element is clicked:
$( "#other" ).click(function() {
$( "#target" ).submit();
@@ -52,6 +52,7 @@ $( "#other" ).click(function() {
After this code executes, clicks on Trigger the handler will also display the message. In addition, the default submit action on the form will be fired, so the form will be submitted.
The JavaScript submit event does not bubble in Internet Explorer. However, scripts that rely on event delegation with the submit event will work consistently across browsers as of jQuery 1.4, which has normalized the event's behavior.
false from an event handler in jQuery differ from returning false in a native event handler (element.addEventListener("click", function () { return false; })) in that jQuery calls event.preventDefault() and event.stopPropagation() and a native event handler only calls event.preventDefault().After this code executes, clicks on Trigger the handler will also alert the message.
The blur event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the blur event will not work consistently across browsers. As of version 1.4.2, however, jQuery works around this limitation by mapping blur to the focusout event in its event delegation methods, .live() and .delegate().
false from an event handler in jQuery differ from returning false in a native event handler (element.addEventListener("click", function () { return false; })) in that jQuery calls event.preventDefault() and event.stopPropagation() and a native event handler only calls event.preventDefault().