Last active
February 25, 2016 20:09
-
-
Save tytskyi/eccc398a03997fffbcb4 to your computer and use it in GitHub Desktop.
An easy way to realise event delegation in jQuery version-agnotic way
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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; | |
})(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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