AngularJS ngClick vs element onClick (v4)

Revision 4 of this benchmark created by angularClick on


Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<ul class="list-unstyled" description data-ng-click="click($event)">
        <li class="col-xs-12 col-md-6">
            <h2 class="icon-way-down">nr1</h2>
            <div class="desc">nr.1 </div>
	        <span></span>
    	</li>
</ul>

Setup

(function wrapper() {
    angular.module('test', []);
  })();

Test runner

Ready to run.

Testing in
TestOps/sec
ngClick
(function wrapper() {

  angular
    .module('test')
    .directive('description', function(utils) {

      'use strict';
      return {
        controller: function($scope, $element, $attrs) {


                     $element.on('click', function (e) {
                            angular.element(e.target).addClass('test');
                         });

        }
      };

    });
})();
ready
onClick
(function wrapper() {

  angular
    .module('test')
    .directive('description', function(utils) {

      'use strict';
      return {
        controller: function($scope, $element, $attrs) {




          $scope.click = function(e) {
            angular.element(e.target).addClass('test');
          };

        }
      };

    });
})();
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by Ivan Pacheco on
  • Revision 2: published by angularClick on
  • Revision 3: published by angularClick on
  • Revision 4: published by angularClick on