метод addEventListener после извлечена данных


Это рабочий код, но я хочу упростить, исправить и улучшить код.

window.addEvent = function(elem,type,callback) {
    var evt = function(e) {
        return callback.call(elem,e);
    };
    var cb = function(e) { return evt(e); };
    elem.addEventListener(type,cb,false);
    return elem;
};
window.findParent = function(child,filter,root) {
    do {
        if( filter(child)) return child;
        if( root && child == root) return false;
    } while(child = child.parentNode);
    return false;
};
function on(type, target, callback) {
  window.addEvent(document.body, type, function(e) {
    var s = window.findParent(e.srcElement || e.target, function(elm) {
        return elm.classList.contains(target);
    },this);

    if( s && callback ) {
        callback(e)
    }
  });
}
on("click", "page-link", function(e){
 console.log("hey its working");
});

В этом примере я обновлю постраничный вывод с помощью fetch, и мне придется привязать addEventListener, чтобы каждая ссылка на страницу. Я думаю, если есть более рациональный способ, с использованием новейших технологий? (с чистого JavaScript)



Комментарии
2 ответа

Ответ на заявление


В этом примере я обновлю постраничный вывод с помощью fetch, и мне придется привязать addEventListener, чтобы каждая ссылка на страницу.

На самом деле, в примере кода выясняется, что elem.addEventListener() называется на document.bodyНе каждая ссылка.

Имена Переменных

Некоторые из названий немного вводит в заблуждение. Например target используется для проверки имя класса элементов. Поэтому лучше имя может быть targetClass, target_classи т. д. Аналогично, s не очень описательные.

Отзывы

Траверсируя дом

Давайте посмотрим на findParent() функции:


window.findParent = function(child,filter,root) {
do {
if( filter(child)) return child;
if( root && child == root) return false;
} while(child = child.parentNode);
return false;
};

Когда будет root когда-либо возвращать false-значение y? В коде выше, document.body передается, так что кажется маловероятным.

Это может быть проще использовать while петли. Как правило, дом обходе код я видел назначит ребенку аргумент к временной переменной (напр. currentNode) и назначить родительского узла к этой переменной до тех пор, пока конечный узел не найден или корень достиг.

window.findParent = function(child,filter,root) {
var currentNode = child;
while(root != currentNode) {
if (filter(currentNode )) {
return currentNode ;
}
currentNode = currentNode.parentNode;
}
return false;
}

Это также может быть переписан как for петли:

window.findParent = function(child,filter,root) {
for(var currentNode = child; root != currentNode; currentNode = curentNode.parentNode) {
if (filter(currentNode )) {
return currentNode ;
}
}
return false;

Более сложные addEvent

В addEvent функция создает две функции (т. е. evt и cb), которые в принципе просто позвонить callback передает объект события в функцию обратного вызова. Эти меры излишни. Это может быть просто добавить прослушиватель событий, передает cb к listener параметр:

window.addEvent = function(elem,type,callback) {
elem.addEventListener(type,callback,false);
return elem;
};

И это нужно вернуть elem? Что бы поддержать сцепление, но ваш пример кода не назначает, что возвращаемое значение к чему-либо или иметь последующий вызов...

Упрощение

Это выглядит как отличное приложение для делегата события, если есть некоторые требования мне не хватает о разделении функциональности в тех отдельных функций? См. пример ниже, который добавляет обработчик событий в корень и тогда только вызовет функцию обратного вызова, если цель мероприятия проходит фильтр.



function on(eventType, targetClass, callback) {
document.body.addEventListener(eventType, function (event) {
if (event.target.classList.contains(targetClass)) {
callback(event);
}
});
}

on("click", "page-link", function(e){
console.log("hey its working", e.target.innerHTML);
});


<h1>Header Text</h1>
<a class="page-link" href="javascript:void(0);">1</a>
<a class="page-link" href="javascript:void(0);">2</a>
<a class="page-link" href="javascript:void(0);">3</a>



1
ответ дан 30 января 2018 в 05:01 Источник Поделиться

Я думаю, что вы можете использовать querySelectorAll() - например:

function on (type, target, callback) {
document.querySelectorAll(target).forEach(function (elem) {
elem.addEventListener(type, callback);
})
}

Ваша функция findParent кажется, похожим на element.closest() . В случае, если вам это нужно для работы с IE, вы можете использовать код ниже. Он работает с селектором, а не просто имя класса.

closest = (element, selector) => {
while(element) {
//For IE11
if (!element.matches)
element.matches = element.msMatchesSelector;

if (element.matches(selector))
return element;

element = element.parentElement;
}
}

3
ответ дан 30 января 2018 в 04:01 Источник Поделиться