2

I am learning jQuery and have a very basic question. How does the following jQuery code match the API documentation for .on():

$('body').on('mouseenter', '#jResult', function(e) {
    ...
});

According to the jQuery API for .on(), .on() can take the following form:

.on( events [, selector ] [, data ], handler )

I gather that the event is 'mouseenter' and the handler is the function, right?

However "selector" and "data" appear to be optional, correct?

Is '#jResult' a selector or data???

After you tell me if it is a selector or data, kindly tell me how I could have figured this out by reading the documentation?

It is probably something obvious, but I have read and re-read the documentation and just don't get it.

Please help...

Glen Pope
  • 21
  • 3
  • event=mouseenter, selector=#jResult, handler = function (e),.. Notice the [], these mean optional, so the data parameter has not been used. – Keith Sep 09 '17 at 21:57

3 Answers3

1

That is the delegated event handler which replaced live() several years ago.

However "selector" and "data" appear to be optional, correct?

That is correct. If the selector parameter is omitted, then the event is not delegated to the parent element.

Is '#jResult' a selector or data???

#jResult is a selector. It is a child element of body on which the event will be listened for.

After you tell me if it is a selector or data, kindly tell me how I could have figured this out by reading the documentation?

It's in the on() documentation in this line under the description of the selector paragraph:

A selector string to filter the descendants of the selected elements that trigger the event

There's also a clearer description in the lower paragraph titled: Direct and delegated events.

The majority of browser events bubble, or propagate, from the deepest, innermost element (the event target) in the document where they occur all the way up to the body and the document element. In Internet Explorer 8 and lower, a few events such as change and submit do not natively bubble but jQuery patches these to bubble and create consistent cross-browser behavior.

If selector is omitted or is null, the event handler is referred to as direct or directly-bound. The handler is called every time an event occurs on the selected elements, whether it occurs directly on the element or bubbles from a descendant (inner) element.

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

Community
  • 1
  • 1
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • Ok, thanks. I have my suspicions confirmed. But I am tripped up by the new terminology. I will keep reading the documentation now that I know it is in there. – Glen Pope Sep 09 '17 at 21:57
  • [This question](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) should hopefully clear up the confusion, as it explains the purpose of delegated event handlers (which is what the signature of `on()` your asking about is), and also from the jQuery site too: http://learn.jquery.com/events/event-delegation/ – Rory McCrossan Sep 09 '17 at 22:06
0

What that version of the code does is set up a selector for event delegation (<-- This documentation will help you to understand the syntax you have and the concept of how it works pretty clearly).

The mouseenter event is attached to the body element, but because of event bubbling, the event may be first triggered by a descendant of body. For example, if you click a link (which is inside of the body), then the click event will be initiated by the link element, but propagate upward, eventually reaching the body element.

Your code tests to see if the mouseenter event that is handled at the body element was initiated by the #jResult element.

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • Thank you. As I said I decided to learn jQuery like a few hours ago. So this a whole new set of words for me to research. I will be back in a few when I Google all the new terminology like "event delegation", descendant and event bubbling. Back soon... – Glen Pope Sep 09 '17 at 21:53
0

how I could have figured this out by reading the documentation

This question can reworded as:

given that both selector and data are optional, how does the event handler know that you've provided a selector and not provided data?

This is covered in the documentation for on() (about half-way down) as:

Passing data to the handler

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.

So in this case:

... .on('mouseenter', '#jResult', function(e) ...

#jResult is a selector as there is no data parameter (the last parameter is recognised as the handler as it's a function).

If you wanted to pass "#jResult" as data as a string, you would call it as:

... .on('mouseenter', null, '#jResult', function(e) ...

if data is not a string, then you don't need the selector, ie:

var d = {};
d.value = '#jResult';
... .on('mouseenter', d, function(e) ...

but that may confuse other developers who would be expecting a selector as the 2nd arg.

Community
  • 1
  • 1
freedomn-m
  • 27,664
  • 8
  • 35
  • 57
  • I now understand how to pass selectors and data to an event handler. Some other programming languages I know require explicit passing of null as a parameter, but I now see the flexibility with jQuery. I have more jQuery terminology to learn, but this part is now crystal clear. Thank you. – Glen Pope Sep 09 '17 at 23:22