Skip to content

Instantly share code, notes, and snippets.

@tytskyi
Last active February 25, 2016 20:09
Show Gist options
  • Save tytskyi/eccc398a03997fffbcb4 to your computer and use it in GitHub Desktop.
Save tytskyi/eccc398a03997fffbcb4 to your computer and use it in GitHub Desktop.
An easy way to realise event delegation in jQuery version-agnotic way
/**
* An easy way to realise event delegation jQuery in version-agnotic way
*/
var easyEvents = (function () {
var easyEvents = function (bindings, jQuery) {
easyEvents._jq = window.jQuery || jQuery;
if (!easyEvents._jq) {
window.mmcore || (window.mmcore = {});
window.mmcore.waitFor || (window.mmcore.waitFor = function () { return {then: function () {}}; });
window.mmcore.waitFor(function () {
return window.jQuery;
}, {
isNotStoppedOnDocumentReadiness: true,
timeout: 5000
})
.then(function () {
easyEvents._jq = window.jQuery;
easyEvents._iterate(bindings, 'delegate');
});
} else {
easyEvents._iterate(bindings, 'delegate');
}
};
easyEvents.delegate = function () {
var bindings = Array.prototype.slice.call(arguments);
easyEvents.apply(easyEvents, bindings);
};
easyEvents.undelegate = function (bindings) {
if (!easyEvents._jq) { return; }
easyEvents._iterate(bindings, 'undelegate');
};
/** utils */
easyEvents._jq = null;
easyEvents._reSeparator = /,\s+/;
easyEvents._own = Object.prototype.hasOwnProperty;
easyEvents._delegate = function (name, selector, handler) {
if (easyEvents._jq.fn.on) {
(handler) ? easyEvents._jq(document).on(name, selector, handler) : 'nothing';
} else if (easyEvents._jq.fn.live) {
(handler) ? easyEvents._jq(selector).live(name, handler) : 'nothing';
}
};
easyEvents._undelegate = function (name, selector, handler) {
if (easyEvents._jq.fn.off) {
var $document = easyEvents._jq(document);
(handler) ? $document.off(name, selector, handler) :
$document.off(name, selector);
} else if (easyEvents._jq.fn.die) {
(handler) ? easyEvents._jq(selector).die(name, handler) :
easyEvents._jq(selector).die(name);
}
};
easyEvents._iterate = function (bindings, method) {
for (var option in bindings) {
if (easyEvents._own.call(bindings, option)) {
var events = [];
var handler = typeof bindings[option] === 'function' ?
bindings[option] : null;
var splitten = option.split(easyEvents._reSeparator);
var len = splitten.length;
var last = splitten[len - 1];
var spacePosition = last.indexOf(' ');
var selector = easyEvents._jq.trim(last.substring(spacePosition));
last = last.substring(0, spacePosition);
for (var i = 0; i < len; i++) {
if (i === len - 1) {
events.push(last);
} else {
events.push(splitten[i]);
}
}
events = events.join(' ');
easyEvents['_' + method](events, selector, handler);
}
}
};
return easyEvents;
})();
var events = {
'mouseover, mousedown body': function () {
console.log('mousedown on body or body hovered by mouse');
},
'mousedown body a': function (event) {
if (event.which === 3) {
event.stopPropagation();
console.log('context menu triggered on some link');
}
},
'click body': function () {
console.log('body clicked with onclick event');
}
};
// Attach events
// this one
easyEvents(events);
// equals to this one
easyEvents.delegate(events);
// now all event handlers attached twice
// attach events with cuctom jQuery
easyEvents(events, window.jQueryCustomBuild);
// Remove all mousedown event handlers from `body a` selector
easyEvents.undelegate({
'mousedown body a': null
});
// Remove all previously bounded events
easyEvents.undelegate(events);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment