0

I am trying to imitate jQuery.on("click", ".target", handler) by utilizing addEventListener() method. My research on Stackoverflow end up with this: Native addEventListener with selector like .on() in jQuery.

So, before some one mark my question as DUPLICATE please read carefully my requirements and my demo.

Here is my Plunker demo https://plnkr.co/edit/so8Sur?p=preview ( I am running chrome when testing it ). Following is the explanation for it:

  • At purple box which is "jQuery way" is running as my expectation which should be show Message popup no matter i am clicking on .target box or it children which is .target-child.
  • But for green box which is my custom event binding, with custom function: customOn(selector, type, filter, handler), it will only show popup when click on .target box only, but it will not show popup when i click on .target-child.

So, my question is, I wonder what kind of magic used by jQuery to make event to be triggered when click on the .target-child on my demo, while the actual selector filter is .target. Will jQuery traverse up on DOM trees to check any selector match every time it needs to handle delegated event? If yes, i feel it will take enough computation resource ( maybe RAM ), is that right? I hope there will be much efficient way rather than doing traverse up like that.

Any answer and comment will be highly appreciated. Thanks in advance.

Bayu
  • 2,340
  • 1
  • 26
  • 31
  • There's no magic at all, it just uses event bubbling. Your logic seems very overcomplicated. – Rory McCrossan Feb 07 '18 at 16:14
  • @RoryMcCrossan, thanks for your comment. Actually i am not really good about event bubbling knowledge. If you could give me an answer to imitate jQuery way by using those event bubbling, that would be great. – Bayu Feb 07 '18 at 16:17
  • That answer is in the duplicate you linked to. – Rory McCrossan Feb 07 '18 at 16:19
  • As i remember i have tried that and the result is also unexpected, here is demo based on my understanding on those Stackoverflow i linked to: https://plnkr.co/edit/2eWO61?p=preview . If you click on "child of target" box, it will do nothing ( expect to show popup ) like on the "jQuery way" – Bayu Feb 07 '18 at 16:38

1 Answers1

-3

Jquery use css selectors as crawling system. So if you click on something, it will "crawl" the parents until it match (or not) the target.

Richard
  • 994
  • 7
  • 26
  • This behaviour, known as 'event bubbling' not 'crawling', firstly has nothing to do with selectors, and secondly is not jQuery specific. It's a JS construct. – Rory McCrossan Feb 07 '18 at 16:21
  • Nice downvote, thanks. It does perform a crawl, that is exactly what bubbling is. and it's all about selectors and jquery since @bayu ask about how jquery trigger events on objects that are childs of another and the jquery syntax uses css selector to let the dev select an object by is classname. that was a simple answer, easy to understand for the op.. nevermind. – Richard Feb 07 '18 at 17:31
  • Thanks for the answer, however i still can't find official documentation which match your answer, about how those CSS "crawl" things related with event delegation by using jQuery `on()` method. – Bayu Feb 08 '18 at 04:16
  • If you need doc about it, as @RoryMcCrossan said, you have to search for "javascript bubbling". I used the term "crawl" to picture what happens insight – Richard Feb 08 '18 at 13:38