Removing jQuery event properties

JavaScript performance comparison

Test case created by Mathias Bynens and last updated

Info

event.layerX & event.layerY will be removed from WebKit soon. Every jQuery-bound event handler now logs this warning:

event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

Screenshot:

See jQuery bug #10531.

It’s possible to prevent jQuery from copying these properties over to its event objects, but what is the fastest way of doing this?

These snippets don’t do exactly the same, but they all have a similar effect: the layerX and layerY properties aren’t copied to jQuery event objects anymore.

Update: Added @dougneiner’s Array#splice snippet.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
join, replace, and split
// reset
$.event.props = ['altKey', 'attrChange', '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', 'shiftKey', 'srcElement', 'target', 'toElement', 'view', 'wheelDelta', 'which'];
// remove layerX and layerY
$.event.props = $.event.props.join('|').replace('layerX|layerY|', '').split('|');
pending…
Using $.map
// reset
$.event.props = ['altKey', 'attrChange', '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', 'shiftKey', 'srcElement', 'target', 'toElement', 'view', 'wheelDelta', 'which'];
// remove layerX and layerY
$.event.props = $.map($.event.props, function(prop) {
  return /^layer/.test(prop) ? null : prop;
});
pending…
while loop + delete
// reset
$.event.props = ['altKey', 'attrChange', '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', 'shiftKey', 'srcElement', 'target', 'toElement', 'view', 'wheelDelta', 'which'];
// remove layerX and layerY
var props = $.event.props,
    length = props.length;
while (length--) {
  /^layer/.test(props[length]) && delete props[length];
}
pending…
ES5 Array#filter
// reset
$.event.props = ['altKey', 'attrChange', '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', 'shiftKey', 'srcElement', 'target', 'toElement', 'view', 'wheelDelta', 'which'];
// remove layerX and layerY
$.event.props = $.event.props.filter(function(item) {
  return !/^layer/.test(item);
});
pending…
Array#splice
// reset
$.event.props = ['altKey', 'attrChange', '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', 'shiftKey', 'srcElement', 'target', 'toElement', 'view', 'wheelDelta', 'which'];
// remove layerX and layerY
if ($.event.props[17] == 'layerX') {
  $.event.props.splice(17, 2);
}
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

2 comments

Adam commented :

Why are these doing a reset of $.event.props in the beginning?

Mathias Bynens (revision owner) commented :

@Adam, to make sure that we start with a clean slate before running the test. jsPerf tests are repeated potentially millions of times, so we wouldn’t want to delete the unwanted properties in the first run, and have subsequent tests delete properties that we didn’t want to delete.

Add a comment