Is it true that top-level elements should control lower-level elements and not vice versa?

Question

JavaScript

There was a dispute with a colleague, he argues that the top-level elements in the DOM tree should control the lower ones and nothing else, i.e. walking up a tree is bad practice. For example, bad practice, in his opinion:

$(document).on('click', 'button', function() {
    $(this).closest('.wrapper').addClass('selected');
});

=== UPD ===

A colleague's solution to this problem:

$('.wrapper').each(function() {
    var item = $(this);
    item.find('button').click(function() {
        item.addClass('selected'); 
    });
});

==========

Guys, well, after all, the engine drives the car, and the person drives the company, and not vice versa. What is your opinion on this matter?

Answer 1

Instead, he argues, we should track the events of external elements and change internal ones.

rave. (c) Valery Karpin

Answer 2

we have to track the events of external elements and change internal ones.

If your colleague can solve a problem that the code you provided solves well with his method, let him demonstrate it. I even got curious.

Answer 3

If we talk about OOP and programming, then your interlocutor is right.
The upper level should directly change the lower ones, and those, in turn
, should send events to which the higher ones may or may not react.
And I don't know who created jQuery, but I can only say one thing,
not one html -> css -> js developer does not know and does not fully understand the principles and basics of programming.
I can add on my own that what is considered the norm in software development and game development, is considered stupid and ridiculous on the web and is justified only by the fact that "I don't do that." All the innovations that appear in recent times are made by java -> c programmers ...
What can I say, even if mvc for sites is not the same as for online games.

Answer 4

try to change the style of the parent with css...

Answer 5

There are a number of tasks that cannot be solved from top to bottom. You pointed at once and a counter-example:) change of the parent, in connection with action in the descendant. It seems to me that also because not everything is possible in css, such a strong library for DOM manipulation as jQuery appeared. And while it has methods like .closest(), you should not bother about "Orthodoxy". Especially if otherwise it doesn’t matter, either it’s impossible, or it’s possible, but much more troublesome.

Answer 6

The Orthodox method is to hang a listener on the parent and determine the child by the target.
In doing so, jQuery saves the element that triggered the event to the delegateTarget variable of the event object.
To paraphrase:

$('.wrapper').on('click', 'button', function(event) {    
    $(event.delegateTarget).addClass('selected');
});

Rationale: Performance. Why look for something (closest / find) if everything is already there.
So both of you are wrong :)