Geekly Articles each Day
⬆️ ⬇️

Delegation of events in AngularJS. Attempt to sort out

Evgeny Grishkovets, the play 'How I ate a dog' Grishkovets as it tells us "And let's see"



In the comments to the article I asked a question about delegating to AngularJS in the context of the fact that many people are used to an imperative method of assigning a handler for a group of elements ala 



$('ul').on('click', 'li', function(){ //  ....


not quite acceptable in declarative AngularJS. Actually, the advice followed to use its directive, which solves the problem of delegation. Actually, nothing sensible came to my mind, and I decided to google, came across such an option : we create a directive that needs to be set on the parent node for the group of elements we need, which registers the listener.

Here is a demo .

And here are 2 parts of the code that interest us:
 html <ul bn-delegate="li a | selectFriend( friend )"> <li ng-repeat="friend in friends"> <!-- Delegate target. --> <a href="#">{{ friend.name }}</a> <!-- Delegate target. --> </li> </ul>


') 

 //js element.on( "click.bnDelegate", selector, function( event ) { // Prevent the default behavior - this is // not a "real" link. event.preventDefault(); // Find the scope most local to the target // of the click event. var localScope = $( event.target ).scope(); // Invoke the expression in the local scope // context to make sure we adhere to the // proper scope chain prototypal inheritance. localScope.$apply( function() { expressionHandler( localScope ); } ); } );




But wait. The dependencies get jQuery (you can do without it, but nonetheless), but this is half the trouble. In the wilds of directives all the same imperative approach. Actually, at this moment I decided to publish the post, with an attempt to understand the approaches to delegation to Angular, the commentary calls on everyone who has something to say about this.



In an attempt to clarify the situation, I came across this issue . At the user's request, the possibility of automatically linking the event to the parent element, using ng-repeat, with motivation for better performance, was sent for performance analysis.



image



As a result, this comrade said that he had done “simple” tests, he was convinced that the violinist was not right. The topic is closed, sadness.



If we weigh the pros and cons of delegation, it turns out

Pros:

  • Simplifies initialization and saves memory: no need to hang a lot of handlers.
  • Less code: when adding and removing items, you do not need to install or remove handlers.
  • Convenience changes: you can massively add or remove elements by changing the innerHTML.




Minuses:

  • First, the event should float. Most of the events pop up, but not all.
  • Secondly, the delegation creates an additional load on the browser, because the handler is started when the event occurs anywhere in the container, not necessarily on the elements that interest us.

    But usually this load is small and is not a problem.






In fact, I couldn’t come up with any tests that were close to reality; on elementary examples, there is absolutely no difference to be seen. Therefore, I urge you to discuss in the comments, is it necessary to use delegation?



Sources:

www.bennadel.com/blog/2448-Using-jQuery-Event-Delegation-In-AngularJS.htm

github.com/angular/angular.js/issues/1568

learn.javascript.ru/event-delegation

Source: https://habr.com/ru/post/218813/

More articles:



All Articles