LINUX.ORG.RU
решено Форум — Web-development  

Задать onmouseover для всех объектов на странице

 


0

1

Привет!

Пишу на коленке некую поделку, без фреймворков/библиотек/прибамбасов вроде node.js, только голый набранный руками JS и HTML. Многого не надо, поделка примитивная (карманный ReversoContext), функциональности хватает, всё работает.

Но хочется навести красоту.

HTML примерно такой: 

...
<span id=«w1» onmouseover='rumpleTits(this.id)'>Hello</span>
...
<span id=«w2» onmouseover='rumpleTits(this.id)'>world</span>
...
<span id=«w3» onmouseover='rumpleTits(this.id)'>et cetera</span>
...
У всех на onmouseover вызывается одно и то же. Можно ли не громоздить onmouseover в каждый тег, а сделать один раз что-то типа 
<body onload=«span.foreach.onmouseover='rumpleTits(this.id)'»>
?

Гугль пишет что-то непознаваемое про foreach и apply, я не осилил допилить под свой случай. Возможно, эти рецепты не для чистого JS.

★★★★

Последнее исправление: muon (всего исправлений: 1) 

<span class='rumple' id=«w1» onmouseover='rumpleTits(this.id)'>Hello</span>
<span class='rumple' id=«w2» onmouseover='rumpleTits(this.id)'>world</span>
<span class='rumple' id=«w3» onmouseover='rumpleTits(this.id)'>et cetera</span>

<script>
var rumples = document.getElementsByClassName("rumple");
for ( var i = 0; i < rumples.length; i++) {
    rumples[i].onmouseover= function() {rumpleTits(this.id); };
}
</script>

P.S. могу где-то ошибаться, но суть в этом

r0ck3r ★★★★★
()
Последнее исправление: r0ck3r (всего исправлений: 1)

Как-то так, код не проверял 

window.onload = function () {
    document.getElementsByTagName('span').forEach(element => {
        element.onmouseover = function() {
            rumpleTits(this.id);
        }
    });
}

hippi90 ★★★★★
()
Ответ на: комментарий от r0ck3r

Я так понимаю, подразумевается что onmouseoner в span уже не нужен.

В целом ты крут, это работает, спасибо!

muon ★★★★
() автор топика
Ответ на: комментарий от hippi90

Отказывается понимать, что такое foreach. Выбрал способ из первого коммента, но window.onload пришёлся очень кстати, спасибо!

muon ★★★★
() автор топика
Ответ на: комментарий от Ja-Ja-Hey-Ho

регистрозависимые функции? вот это поворот.

Но нет, я копипастил, и в коде forEach. Видимо, дело не в этом.

muon ★★★★
() автор топика
Ответ на: комментарий от muon

да, точно, это лишнее, не обратил внимания.

Не за что

r0ck3r ★★★★★
()
Последнее исправление: r0ck3r (всего исправлений: 1)

А не лучше ли сделать один onmousemove для всего body, который будет искать под курсором подходящий элемент и при обнаружении такового делать переключение?

shatsky ★★
()
Ответ на: комментарий от shatsky

Плюсую этого регистранта. Данный прием называется делегирование.

karmich ★
()

Чем вас не устраивает такое:

function filter_element(elem) {
  return true;
}

function cb_mouseover(evt) {
  if (filter_element(this)) {
    // Do something.
  }
}

document.addListener('mouseover', cb_mouseover, {"passive": true});

sanwashere ★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development