Event property access

Benchmark created by Dave on


Description

Copying properties out of an event object is more expensive than copying them between two plain JavaScript objects.

Preparation HTML

<button id="test1">Click Magnet</button>
<button id="test2">Clack Magnet</button>
 
<script>
  var testObj = {
     altKey : false, bubbles: true, button: 0, cancelable: true, charCode: undefined, clientX: 99, clientY: 98, currentTarget: document, data: null, detail: 42, eventPhase: "bubble", fromElement: document, handler: null, keyCode: 0, metaKey: false, newValue: 44, offsetX: 97, offsetY: 96, pageX: 95, pageY: 94, relatedNode: null, relatedTarget: document.body
  };
  props = "altKey attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode layerX layerY metaKey newValue offsetX offsetY pageX pageY prevValue relatedNode relatedTarget screenX screenY".split(" ");
  
  t1 = document.getElementById("test1");
  t1.onclick = function(){
    var copy = {};
    for ( var i=0; i < props.length; i++ ) {
     var p = props[i];
     copy[p] = testObj[p];
    }
  };
  t2 = document.getElementById("test2");
  t2.onclick = function(e){
    e = e || event;
    var copy = {};
    for ( var i=0; i < props.length; i++ ) {
     var p = props[i];
     copy[p] = e[p];
    }
  };
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Plain JS object copy
t1.click();
ready
Event object copy
t2.click();
ready

Revisions

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