Adding Listeners in JavaScript (v35)

Revision 35 of this benchmark created by Bruno Astolfi on

Description

Senhores, notei uma pequena diferença entre o uso de 'click' em relação ao uso de um evento personalizado (por exemplo: 'myEvent'). Em todos os casos o jQuery foi superior, mas vale testar um pouco melhor os casos de eventos existentes contra eventos personalizados.

PS.: I can't create 'Adding Listeners in JavaScript' as a new topic, its not a new release about creating elements. Sorry for it.

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script>

Setup

var J = jQuery.noConflict();
    var element = document.createElement('div');
    var func = function() {
      console.log('test');
    };
    var func2 = function(event) {
      console.log(event);
    }

Teardown


    element.click();

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery (bind)
J("#element").bind('click', function() {
  console.log('test');
});
ready
Prototype
$(element).observe('click', function() {
  console.log('test');
});
ready
JavaScript (nature) XXX
var func3 = function() {
  console.log('test');
};

element.addEventListener('click', func3, false);
ready
jQuery (click)
J("#element").click(function() {
  console.log('test');
});
ready
jQuery (bind + not closure)
J("#element").bind('click', func);
ready
jQuery (click + not closure)
J("#element").click(func);
ready
JavaScript (nature + not closure)
element.addEventListener('click', func, false);
ready
Prototype (not closure)
$(element).observe('click', func);
ready
Prototype (not closure + target)
$(element).observe('click', func2);
ready
JavaScript (nature + not closure + target)
element.addEventListener('click', func2, false);
ready
jQuery (not closure + target)
J("#element").bind('click', func2);
ready
Create 1
var e = document.createElement('div');
e.id = 'id';
e.class = 'class';
e.innerHTML = 'some Text';

var $e = $(e);
ready
Create 2
var e = document.createElement('div');
e.setAttribute('id','id');
e.addClassName('class');
var et = document.createTextNode('some Text');
e.appendChild(et);
var $e = $(e);
ready
Create 3
var e = document.createElement('div');
e.setAttribute('id','id');
e.addClassName('class');
e.textContent = 'some Text';
var $e = $(e);
ready
Div ++ (appendChild)
var e = document.createElement('div');
e.setAttribute('id','id');
e.addClassName('class');
e.textContent = 'some Text';
var $e = $(e);

var a = document.createElement('div');
a.addClassName('class');
a.textContent = 'some Text';
var $a = $(a);

e.appendChild(a);
ready
Div ++ (update)
var e = document.createElement('div');
e.setAttribute('id','id');
e.addClassName('class');
e.textContent = 'some Text';
var $e = $(e);

var a = document.createElement('div');
a.addClassName('class');
a.textContent = 'some Text';
var $a = $(a);

e.update(a);
ready
CreateElement
var e = document.createElement('div');
e.setAttribute('id','id');
e.addClassName('class');
e.textContent = 'some Text';
var $e = $(e);
ready
new Element
var e = new Element('div');
e.setAttribute('id','id');
e.addClassName('class');
e.textContent = 'some Text';
var $e = $(e);
ready

Revisions

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