Директива для обработки большого количества DOM-событий в AngularJS

Рейтинг: 0Ответов: 1Опубликовано: 30.04.2015

Допустим, есть схема в формате SVG, на которой много разных элементов, для каждого элемента надо добавить событие click, как правильно (производительно) добавить событие на сотни элементов. Оправдано ли использовать такую директиву, или же проще средствами JQuery

var app = angular.module('pl', []);
app.controller('MainCtrl', function($scope) {
});

app.directive('rect', function() {
  return function(scope, element, attrs) {
    element.bind("click", function(event) {
      console.log("clicks");

    });
  };
})
<body ng-controller="MainCtrl">
  <svg id="svgg" width="600px" height="600px">
<rect x="0" y="0" width="10px" height="10px"/><rect x="0" y="10" width="10px" height="10px"/><rect x="0" y="20" width="10px" height="10px"/><rect x="0" y="30" width="10px" height="10px"/>
...
  </svg>
</body>
</html>

http://plnkr.co/edit/P97VaDMvyJ63xMxh4KjE?p=preview

angularjs
Источник: Stack Overflow на русском

Ответы

▲ 2

Из-за соображения производительности я порекомендовал бы использовать метод делегирования события. Этот метод работает достаточно прост:

  1. Привязывается событие к родителю, в котором расположено множество элементов
  2. В обработчике этого события проверяется event.target, то есть проверяется кто именно вызвал это событие (тег rect). Это делает на случай если родитель имеет другие элементы, которые не нужно обрабатывать.
  3. Выполняется логика

Этот метод сокращает потребление памяти, потому "прослушивается" одно событие одного элемента, а не 100 штук.

Реализовать это можно как с помощью нативного JavaScript'a или jQuery, либо с помощью AngularJS, только директиву надо добавлять для родителя rect'ов, к svg как вариант.