Форум

sortarray · #11 (**permalink**) 05.04.2018, 15:36

Сообщение от Nexus

Если вас не затруднит написать эти пару строк, продемонстрируйте их, пожалуйста.

<html>
<head>
<meta charset = "utf-8" />
<style>
</style>
</head>

<body>

<div id = "foo">click me</div>

<script>

foo.storage = []
foo.onclick = function(){var self = this; foo.storage.forEach(function(f){f.call(self)})}
with(foo){
 storage.push(function(){alert(this.innerHTML)})
 storage.push(function(){alert(this.id)})
 storage.push(function(){alert("fuck addEventListener")})
}

</script>

</body>
</html>

Сообщение от Nexus

Можете объяснить недостаток объявления обработчика этим методом?

Там их целая куча -- невозможность удаления без сохранения ссылок, отсутствие гибкости, тормоза и т.д

Dimasikylll · #12 (**permalink**) 05.04.2018, 15:44

Malleys, спасибо. Там оказывается клик считывался на дочернем элементе с абсолютным позиционированием.

Nexus · #13 (**permalink**) 05.04.2018, 15:49

sortarray, это вот ваше решение проблемы?
Прошу прощения, но каким образом ваш код избавит меня от затирания прошлого обработчика события на "левом" элементе?
Более того, если я не буду знать о вашем костыле и объявлю новый обработчик элементу #foo через свойство, то все ваши handler'ы нафиг поотваливаются.

Сообщение от sortarray

невозможность удаления без сохранения

Ну, ваш вариант тут тоже не блещет, мягко говоря.

Сообщение от sortarray

отсутствие гибкости

Можете пояснить?

Сообщение от sortarray

тормоза

Если левой ногой программировать, то тормозить будет любой код

sortarray · #14 (**permalink**) 05.04.2018, 15:55

Nexus,

Сообщение от Nexus

Прошу прощения, но каким образом ваш код избавит меня от затирания прошлого обработчика события на "левом" элементе?
Более того, если я не буду знать о вашем костыле и объявлю новый обработчик через свойство, то все ваши handler'ы нафиг поотваливаются.

Это какая-то непонятная для меня хрень. Тут все от рук зависит

Сообщение от Nexus

Ну, ваш вариант тут тоже не блещет, мягко говоря.

В моем можно удалять обычным способом, по индексу, сигнатуре функции и т.д
Никаких ограничений.

Сообщение от Nexus

Можете пояснить?

Там, опять же, тма тмущая. Например, можно шарить поведение между двумя объектами. Прозрачность, опять же.

Сообщение от Nexus

Если левой ногой программировать, то тормозить будет любой код

Но от нативных тормозов хороший код не избавит

Nexus · #15 (**permalink**) 05.04.2018, 16:06

Сообщение от sortarray

Это какая-то непонятная для меня хрень. Тут все от рук зависит

Что непонятного?
Вы в проекте все обработчики на 1 элемент вешаете или для каждого будете создавать отдельное хранилище и пушить в него хандлеры?
Ваше решение работоспособно до тех пор, пока я не захочу объявить обработчик через свойство, а не через ваш велосипед.

foo.storage = []
foo.onclick = function(){var self = this; foo.storage.forEach(function(f){f.call(self)})}
with(foo){
 storage.push(function(){alert(this.innerHTML)})
 storage.push(function(){alert(this.id)})
 storage.push(function(){alert("fuck addEventListener")})
}
foo.onclick=()=>{
alert(prompt('Угадайте сколько раз вылезет alert',0)==1);
};

Сообщение от sortarray

В моем можно удалять обычным способом, по индексу
Никаких ограничений.

В вашем случае точно также нужно хранить индекс записанного обработчика.

Сообщение от sortarray

сигнатуре функции

Пример можно?

Сообщение от sortarray

Но от нативных тормозов хороший код не избавит

Он их не допустит, имхо. Можете привести пример тормозящего addEventListener'а?

Nexus · #16 (**permalink**) 05.04.2018, 16:17

Не очень решение для нескольких элементов + страшно представить код для обработки второго события )

<html>
<head>
<meta charset = "utf-8" />
<style>
</style>
</head>

<body>

<div id = "foo">click me</div>
<div id = "bar">click me</div>

<script>

foo.storage = []
foo.onclick = function(){var self = this; foo.storage.forEach(function(f){f.call(self)})}
with(foo){
 storage.push(function(){alert(this.innerHTML)})
 storage.push(function(){alert(this.id)})
 storage.push(function(){alert("fuck addEventListener")})
}

bar.storage = []
bar.onclick = function(){var self = this; foo.storage.forEach(function(f){f.call(self)})}
with(bar){
 storage.push(function(){alert(this.innerHTML)})
 storage.push(function(){alert(this.id)})
 storage.push(function(){alert("fuck addEventListener")})
}

</script>

</body>
</html>

+ Вы начинали с того, что хвалили объявление обработчиков через свойство, однако один фиг от него ушли, ибо ваше решение его просто не поддерживает (писал выше).

sortarray · #17 (**permalink**) 05.04.2018, 16:23

Nexus,
Я полагаю этот спор пустым, мне не интересно что-то доказывать. Кто понимает, тот и без того понимает
Вообще, в программировании всегда действует принцип "явное лучше неявного".
Если даже реализовать addEventListener с тем же поведением, что нейтив, самостоятельно, это будет лучше хардкора

Nexus · #18 (**permalink**) 05.04.2018, 16:27

sortarray, отчего же пустым?
Если вы докажете свою точку зрения, то те "заблудшие души", что объявляют event listener'ы через метод "addEventListener" задумаются о эффективности такого подхода и, возможно, перейдут на использование вашего велосипеда.
В противном случае, я таки надеюсь, вы задумаетесь о эффективности уже вашего решения etc.

Nexus · #19 (**permalink**) 05.04.2018, 16:31

Сообщение от sortarray

Кто понимает, тот и без того понимает

Если есть тут другие понимающие, приведите, пожалуйста, пример кода, где будет показана неэффективности объявления обработчика через "addEventListener" в пользу предлагаемого уважаемым sortarray метода.

Nexus · #20 (**permalink**) 05.04.2018, 16:37

Сообщение от sortarray

Вообще, в программировании всегда действует принцип "явное лучше неявного".

document.querySelector('#id').storage.click.push(function(){});//Т.е. объявление обработчика события таким способом более "явное", чем строкой ниже?
document.querySelector('#id').addEventListener('click',function(){});

Сообщение от sortarray

Если даже реализовать addEventListener с тем же поведением, что нейтив, самостоятельно, это будет лучше хардкора

Голословное заявление.

Upd. https://jsfiddle.net/oL8z9r38/

Форум

Справочник

Discord чат

Курсы javascript