Removing jQuery event properties

JavaScript performance comparison

Revision 8 of this test case created

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>

<script type="text/javascript">
var props = $.event.props;
</script>

Preparation code output

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…
Array#splice with ambiguous location
 
// 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 i;
if ( ~(i = $.inArray('layerX', $.event.props)) ) {
    $.event.props.splice(i, 2);
}
 pending…
while loop and delete from revision 6
 
// reset
$.event.props = window.props;
// remove layerX and layerY
var props = $.event.props,
    length = props.length;
while (length--) {
  var el = props[length];
  (el === 'layerX' || el === 'layerY') && delete props[length];
}
 pending…
for loop and delete from revision 6
 
// reset
$.event.props = window.props;
// remove layerX and layerY
var props = $.event.props,
    length = props.length,
    i;
for (i = 0; i < length; i++) {
  var el = props[i];
  (el === 'layerX' || el === 'layerY') && delete props[i];
}
 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:

0 comments

Add a comment