kupriyanenko / jbone

JavaScript Library for Events and DOM manipulation. Replaces jQuery for Backbone (2.5kb gzipped)
http://jbone.js.org
MIT License
279 stars 35 forks source link

Fixing event leak when using multiple event handlers on the same element #55

Closed mindfreakthemon closed 9 years ago

mindfreakthemon commented 9 years ago

Hi!

When using multiple jBone event handlers on the same element, removing the first added handler before any other will result in leaking the native event handler as to it cannot be removed anymore.

Consider the following example:

<!doctype html>
<html>
<head>
    <title>Test Leak</title>
    <script type="text/javascript" src="bower_components/jbone/dist/jbone.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
    var $body = $('body');

    $body.on('mouseover.nice1', function () {});
    $body.on('mouseover.nice2', function () {});
    $body.off('mouseover.nice1');
    $body.off('mouseover.nice2');
</script>
</html>

Here we are removing the first jBone handler and after that - the second one. The first jBone handler was the one that was put into addEventListener's callback argument, but it will not call removeEventListener as to there is still another event in the events array. Removing the second handler does call removeEventListener, but it does not remove the native handler because the callback argument does not match with the one that was put into addEventListener.