Но как снять эту прослушку потом в unbind?
Ну, очевидно же - для этого надо как-то сохранить ссылку на обработчик скролла.
Самый простой вариант - цеплять его к элементу в качестве свойства:
bind(el, options) {
const handler = () => { ... };
window.addEventListener('scroll', handler);
el.scrollHandler = handler;
},
unbind(el) {
window.removeEventListener('scroll', el.scrollHandler);
},
Или можно использовать Map для хранения обработчиков - ключами будут элементы. Надо только не забыть в unbind в дополнение к снятию обработчика удалять его так же и из Map'а (ну или вместо Map используйте WeakMap).
А вообще, есть и другой путь - так как обработчики вы подключаете к window, на самом деле достаточно одного обработчика сразу для всех элементов: вешаете его при загрузке страницы; опять же, будет Map, элементы в качестве ключей, значениями будут объекты, содержащие в себе options.value, options.arg и что там ещё будет нужно; в обработчике обходите Map, скрываете/показываете элементы:
const map = new Map();
window.addEventListener('scroll', function(e) {
[...map.entries()].forEach(([ el, { className, deleteClass } ]) => {
...
});
});
bind(el, options) {
map.set(el, {
className: options.value,
deleteClass: options.arg === 'delete',
});
},
unbind(el) {
map.delete(el);
},
Средний
