Не работает onclick
let flips = document.querySelectorAll('.flip');
onclick = (event) => {
if(flips[5] === event.target)
{
alert("hello");
}
... //другие работающие функции
}
Почему не выводится hello при клике на флипс? Ошибок никаких не показывает и просто не хочет работать, но работает с другим вариантом:
flips[5].onclick = () => {
alert('hello');
}
Оба варианта ведь должны работать, разве нет? |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="flip">0</div>
<div class="flip">1</div>
<div class="flip">2</div>
<div class="flip">3</div>
<div class="flip">4</div>
<div class="flip">5</div>
<script>
let flips = document.querySelectorAll('.flip');
flips.forEach((el,i)=>el.onclick = (event) => {
if(i==5) alert("hello");
});
</script>
</body>
</html>
У вас обработчик на воздух навешивается? |
В первом варианте клик считывается на всех элементах и таргет указывает, на каком именно элементе клик нужен, разве нет?
|
Цитата:
Но код работает
<html>
<head>
<meta charset = "utf-8" />
<style>
</style>
</head>
<body>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<script>
const flips = document.querySelectorAll(".flip")
onclick = function(event){
if(flips[2] === event.target) alert(100)
}
</script>
</body>
</html>
Посмотрите, нет ли других ошибок |
Не выдаёт никаких ошибок и работает только при навешивании клика на каждый элемент, без понятия почему
|
Dimasikylll, вы все обработчики события click вешаете через свойство и на глобальный объект window?
Почитайте: https://learn.javascript.ru/introduc...82%D0%B2%D0%BE |
Я не вешаю несколько обработчиков на один элемент. Либо проверяю клик через window, либо просто вешаю клик на элемент. По отдельности оба способа должны работать, но у меня работает только при навешивании клика на элемент.
|
Цитата:
С другой стороны, расхваливаемые им функции, типа addEventListener имеют свои недостатки, и они даже, по-моему, посерьезней Так что этот способ вполне годный. Нет смысла отказываться от него. |
Если что-то не получается или работает не как ожидалось, можно вывести в в консоль
onclick = event => {
console.log(event, event.target);
};
|
Цитата:
Цитата:
|
Цитата:
<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>
Цитата:
|
Malleys, спасибо. Там оказывается клик считывался на дочернем элементе с абсолютным позиционированием.
|
sortarray, это вот ваше решение проблемы?
Прошу прощения, но каким образом ваш код избавит меня от затирания прошлого обработчика события на "левом" элементе? Более того, если я не буду знать о вашем костыле и объявлю новый обработчик элементу #foo через свойство, то все ваши handler'ы нафиг поотваливаются. Цитата:
Цитата:
Цитата:
|
Nexus,
Цитата:
Цитата:
Никаких ограничений. Цитата:
Цитата:
|
Цитата:
Вы в проекте все обработчики на 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);
};
Цитата:
Цитата:
Цитата:
|
Не очень решение для нескольких элементов + страшно представить код для обработки второго события )
<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>
+ Вы начинали с того, что хвалили объявление обработчиков через свойство, однако один фиг от него ушли, ибо ваше решение его просто не поддерживает (писал выше). |
Nexus,
Я полагаю этот спор пустым, мне не интересно что-то доказывать. Кто понимает, тот и без того понимает Вообще, в программировании всегда действует принцип "явное лучше неявного". Если даже реализовать addEventListener с тем же поведением, что нейтив, самостоятельно, это будет лучше хардкора |
sortarray, отчего же пустым?
Если вы докажете свою точку зрения, то те "заблудшие души", что объявляют event listener'ы через метод "addEventListener" задумаются о эффективности такого подхода и, возможно, перейдут на использование вашего велосипеда. В противном случае, я таки надеюсь, вы задумаетесь о эффективности уже вашего решения etc. |
Цитата:
|
Цитата:
document.querySelector('#id').storage.click.push(function(){});//Т.е. объявление обработчика события таким способом более "явное", чем строкой ниже?
document.querySelector('#id').addEventListener('click',function(){});
Цитата:
Upd. https://jsfiddle.net/oL8z9r38/ |
Nexus,
Что касается тормозов нейтива, не поленился, протестил, резуьтат меня самого поразил, разница у меня в хроме X10 примерно. Я ожидал тормозов, но чтобы так.
<html>
<head>
<meta charset = "utf-8" />
<style>
</style>
</head>
<body>
<div id = "foo">click me foo</div>
<div id = "bar">click me bar</div>
<button id = "check">check</button>
<script>
foo.storage = []
foo.onclick = function(){var self = this; foo.storage.forEach(function(f){f.call(self)})}
var startTimeForCustom
var startTimeForNative
var endTimeForCustom
var endTimeForNative
foo.storage.push(function(){startTimeForCustom = new Date()})
i = 10000
while(i--) foo.storage.push(function(){return 1 + 1})
foo.storage.push(function(){endTimeForCustom = new Date(); console.log("end custom")})
bar.addEventListener("click", function(){startTimeForNative = new Date()})
i = 10000
while(i--) bar.addEventListener("click", function(){return 1 + 1})
bar.addEventListener("click", function(){endTimeForNative = new Date(); console.log("end native")})
check.onclick = function(){
console.log("custom: " + (endTimeForCustom - startTimeForCustom))
console.log("native: " + (endTimeForNative - startTimeForNative))
}
</script>
</body>
</html>
И это при том, что перебор идет через нативный форич, то есть можно еще оптимизировать циклом. |
Цитата:
Единственное в чем было сомнение, это скорость |
sortarray, и что вы замеряли в 21-м посту?
Скорость добавления в очередь? Вам не кажется, что нужно замерять скорость её исполнения? Смотрите 20-й пост. Ваш метод стабильно на 200ms уступает. |
Цитата:
|
sortarray, согласен, на более тривиальных задачах ваш метод быстрее.
|
Цитата:
custom: 38.375244140625ms native: 3365.93896484375ms |
Цитата:
|
sortarray,
Цитата:
|
Цитата:
|
querySelectorAll; в ~20 раз медленнее getElementsByClassName или getElementsByTagName, но вряд ли это-кто-то заметит если из не >100 000
|
Nexus,
Что касается вашего кода, то у меня там вся консоль засралась, я ничего не понял. Кто так тестит, что всю консоль выхлопом засирает? Убрал выхлоп, получилось примерно то же самое, что у меня. Так что не надо лапшу тут вешать |
практически любой метод для работы со строками или массивами можно заменить обычным циклом, опять же вопрос удобства использования.
чем выше степень абстракции там медленнее код. на более низкоуровневых языках можно написать код который будет гораздо быстрее, только вот нужны ли такие мучения?? зачем нужны языки с динамической типизацией если на выполнение требуется больше процессорного времени? вопрос удобства использования =) |
sortarray,
сам браузер тоже влияет, некоторые методы в FF выполняются в 5-10 раз быстрей чем в хроме, другие же наоборот. |
sortarray, в Chrome в консоль выводится 4 строки, 2 из которых со счетчиком.
|
https://jsperf.com/ -вот хороший сервис чтобы скорость тестировать
|
Цитата:
|
Цитата:
https://jsfiddle.net/asaLt1by/ |
Цитата:
|
Цитата:
Плюсом тут только универсальность кода при совместной разработке. Почти все методы массивов можно написать и без нативной поддержки. Нативная поддержка нужна только для специфических фич, таких как Proxy, например |
Цитата:
|
| Часовой пояс GMT +3, время: 04:19. |