Обработчики привязки в native API выполняются с использованием addEventListener()
.
Чтобы эмулировать делегирование события jQuery, вы могли бы довольно легко создать систему, которая использует метод .matches()
для проверки выбранного вами селектора.
function delegate(el, evt, sel, handler) {
el.addEventListener(evt, function(event) {
var t = event.target;
while (t && t !== this) {
if (t.matches(sel)) {
handler.call(t, event);
}
t = t.parentNode;
}
});
}
Возможно, есть некоторые настройки, но в основном это функция, которая связывает элемент, например document
, тип события, селектор и обработчик.
Он начинается с e.target
и пересекает родителей, пока не попадет в связанный элемент. Каждый раз он проверяет, соответствует ли текущий элемент селектору, и если это так, он вызывает обработчик.
Итак, вы бы назвали его следующим:
delegate(document, "click", ".some_elem", function(event) {
this.style.border = "2px dashed orange";
});
Вот живая демонстрация, которая также добавляет динамические элементы, чтобы показать, что новые элементы также собраны.
function delegate(el, evt, sel, handler) {
el.addEventListener(evt, function(event) {
var t = event.target;
while (t && t !== this) {
if (t.matches(sel)) {
handler.call(t, event);
}
t = t.parentNode;
}
});
}
delegate(document, "click", ".some_elem", function(event) {
this.parentNode.appendChild(this.cloneNode(true));
this.style.border = "2px dashed orange";
});
<div>
<p class="some_elem">
<span>
CLICK ME
</span>
</p>
</div>
Вот прокладка, чтобы добавить немного больше поддержки для .matches()
.
HTMLElement.prototype.matches =
HTMLElement.prototype.matches ||
HTMLElement.prototype.matchesSelector ||
HTMLElement.prototype.webkitMatchesSelector ||
HTMLElement.prototype.mozMatchesSelector ||
HTMLElement.prototype.msMatchesSelector ||
HTMLElement.prototype.oMatchesSelector;