While I am trying to learn jquery I learned that $(selector) returns an object which has all the match of that selector and is iterable like arrays. eg $("button") will return an object that will have access to all the button tag of DOM in such way that to access the first button tag you can use $["button"][0] for second you can use $["button"][1] and so on.
So here below is code focus on mented line 1 and line 2.
<body>
<button>Click me</button>
<script>
$(document).ready(function() {
// line 1
$("button").click(function() {
console.log("1");
// line 2
$("button").click();
});
});
</script>
</body>
line 2 inside line1 event handler function is set up an infinite loop as you can see that when I Click on "Click me" button it will trigger line1 inside of which is line 2 which too will again trigger line 1 and so on. now see the below code snippet with changed line2.
<script>
$(document).ready(function() {
// line 1
$("button").click(function() {
console.log("1");
// line 2
$("button")[0].click();
});
});
</script>
This time it is not setting up an infinite loop but prints to console "1" only two times why so?
While I am trying to learn jquery I learned that $(selector) returns an object which has all the match of that selector and is iterable like arrays. eg $("button") will return an object that will have access to all the button tag of DOM in such way that to access the first button tag you can use $["button"][0] for second you can use $["button"][1] and so on.
So here below is code focus on mented line 1 and line 2.
<body>
<button>Click me</button>
<script>
$(document).ready(function() {
// line 1
$("button").click(function() {
console.log("1");
// line 2
$("button").click();
});
});
</script>
</body>
line 2 inside line1 event handler function is set up an infinite loop as you can see that when I Click on "Click me" button it will trigger line1 inside of which is line 2 which too will again trigger line 1 and so on. now see the below code snippet with changed line2.
<script>
$(document).ready(function() {
// line 1
$("button").click(function() {
console.log("1");
// line 2
$("button")[0].click();
});
});
</script>
This time it is not setting up an infinite loop but prints to console "1" only two times why so?
Share Improve this question edited Jun 24, 2019 at 5:24 user8795381 asked Jun 24, 2019 at 5:20 Yogesh_SinghYogesh_Singh 4251 gold badge5 silver badges9 bronze badges 6-
What jQuery is doing is pretty understandable, but an
addEventListenerhandler appears to run twice jsfiddle/xtu24ny5 – CertainPerformance Commented Jun 24, 2019 at 5:33 - @CertainPerformance how what jquery is doing is understandable and also again why is your code only printing 'click' to console only two times and is not triggering an infinite loop? – Yogesh_Singh Commented Jun 24, 2019 at 5:58
-
1
In the first snippet, jQuery's
.click()triggers the jQuery-attached event, which subsequently calls.click()again recursively. An infinite loop isn't surprising. What's surprising is that calling the (built-in).clickmethod on the element runs twice. I'd have expected infinite recursion like with jQuery, or (if recursion is not permitted) a single log of1. It looks like programmatic.click()s are only permitted to fire handlers once per... event loop? But I have no idea why, or any reference on this sort of behavior – CertainPerformance Commented Jun 24, 2019 at 6:04 -
Guessing here but I can only assume that
HTMLElement.click()inspects the event and won't re-fire if it originated from.click(). It probably does this to specifically avoid infinite loops – Phil Commented Jun 24, 2019 at 6:42 - @CertainPerformance yes, I too am saying that I can understand what snippet 1 is doing but can't the behavior of the second snippet, when you said what jquery is doing is understandable I thought you meant to say the second code snippet's output is expected and defined. so, sorry I messed it up there. Also, for now, I am considering the behavior of $[selector"][index].function() as undefined because when i did $["form"][0].submit(eventHandler); it doesn't goes to eventHandler and directly submits the form. – Yogesh_Singh Commented Jun 24, 2019 at 6:55
4 Answers
Reset to default 6It is most likely the way in which the synthetic event is being invoked by JQuery.
Here is the JQuery snippet for event dispatch.
dispatch: function( nativeEvent ) {
// Make a writable jQuery.Event from the native event object
var event = jQuery.event.fix( nativeEvent );
var i, j, ret, matched, handleObj, handlerQueue,
args = new Array( arguments.length ),
handlers = ( dataPriv.get( this, "events" ) || {} )[ event.type ] || [],
special = jQuery.event.special[ event.type ] || {};
// Use the fix-ed jQuery.Event rather than the (read-only) native event
args[ 0 ] = event;
for ( i = 1; i < arguments.length; i++ ) {
args[ i ] = arguments[ i ];
}
event.delegateTarget = this;
// Call the preDispatch hook for the mapped type, and let it bail if desired
if ( special.preDispatch && special.preDispatch.call( this, event ) === false ) {
return;
}
// Determine handlers
handlerQueue = jQuery.event.handlers.call( this, event, handlers );
// Run delegates first; they may want to stop propagation beneath us
i = 0;
while ( ( matched = handlerQueue[ i++ ] ) && !event.isPropagationStopped() ) {
event.currentTarget = matched.elem;
j = 0;
while ( ( handleObj = matched.handlers[ j++ ] ) &&
!event.isImmediatePropagationStopped() ) {
// If the event is namespaced, then each handler is only invoked if it is
// specially universal or its namespaces are a superset of the event's.
if ( !event.rnamespace || handleObj.namespace === false ||
event.rnamespace.test( handleObj.namespace ) ) {
event.handleObj = handleObj;
event.data = handleObj.data;
ret = ( ( jQuery.event.special[ handleObj.origType ] || {} ).handle ||
handleObj.handler ).apply( matched.elem, args );
if ( ret !== undefined ) {
if ( ( event.result = ret ) === false ) {
event.preventDefault();
event.stopPropagation();
}
}
}
}
}
// Call the postDispatch hook for the mapped type
if ( special.postDispatch ) {
special.postDispatch.call( this, event );
}
return event.result;
}
Reading the spec for synthetic and authentic click events:
When a user agent is to run post-click activation steps on an element, it must run the activation behavior defined for that element, if any. Activation behaviors can refer to the click event that was fired by the steps above leading up to this point.
As JQuery has implemented a custom dispatch handler for emulating click events it looks like they have added the following in order to emulate that aforementioned native html event lifecycle.
if ( special.postDispatch ) {
special.postDispatch.call( this, event );
}
This call here is likely the suspect, proven when you look at the console output for the following. Note that you never see the console.log Done because the dispatch handler is never actually returning the event to plete it's native lifecycle (endless recursion), which I suspect is just frankly handled better by the native html implementation.
Infinite loop warning
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<body>
<button>Click me</button>
<script>
$(document).ready(function() {
// line 1
$("button").click(function() {
console.log("start");
// line 2
$("button").click();
console.log("Done");
});
});
</script>
</body>Good find!
When you do $("button")[0] you are getting back the underlying native HTMLButtonElement object that is not a jQuery object.
$('button').click(fn) does things like below
$("button").each(function() {
//this === native button htmlElement.
if (!this._event) this._event = {};
if (!this._event.click) this._event.click = [];
this._event.click.push(fn);
if (!this.clickHandler) {
this.clickHandler = e => {
this._event.click.forEach(f => f.bind(this)(e));
};
this.addEventListener("click", this.clickHandler);
}
});
$('button').click() means
$("button").each(function() {
//this === native button htmlElement.
if(this.clickHandler)this.clickHandler();
if(typeof this.onclick === 'function') this.onclick();
});
It's just an example, the jquery event source code is much more plex.
And why $("button")[0].click() prints '1' only twice?
native click simulates a mouse click on the button element,so I assume that the loop is blocked by Explorer for a security reason.
bind events source code
trigger source code
$(“button”) returns a jq object,it calls methods on the jq object and $(“button”)[0] returns a DOM object,it calls the dom native method