Javascript-форум - на что навешать обработчик события

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - на что навешать обработчик события (https://javascript.ru/forum/misc/29942-na-chto-naveshat-obrabotchik-sobytiya.html)

Вроде очень даже удобная схема получается

<input type="button" value="click" class="but1">
<input type="button" value="click" class="but2">

<script>
window.onload = function () {//onload begin

  document.body.onclick = function (e) {//onclick begin
    e = e || event;
    var target = e.target || e.srcElement;
    
    if (target.className == 'but1') {
      alert(target.className);
      return;
    }

    if (target.className == 'but2') {
      alert(target.className);
      return;
    }

  }//onclick end

}//onload end
</script>

<input type="button" value="click" class="but1">
<input type="button" value="click" class="but2">

<script>
window.onload = function () {//onload begin

  document.body.onclick = function (e) {//onclick begin
    e = e || event;
    var target = e.target || e.srcElement;
    
    if (target.className == 'but1') {
      alert(target.className);
    } else 

    if (target.className == 'but2') {
      alert(target.className);
    }

  }//onclick end

}//onload end
</script>

<input type="button" value="click" class="but1">
<input type="button" value="click" class="but2">

<script>
window.onload = function () {//onload begin

  document.body.onclick = function (e) {//onclick begin
    e = e || event;
    var target = e.target || e.srcElement;
    
    switch (target.className) {//switch begin
      case 'but1': {
        alert(target.className);
        break;
      }
      case 'but2': {
        alert(target.className);
        break;
      }
    }//switch end

  }//onclick end

}//onload end
</script>

Цитата:

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

а если потом надо поменять функцию, это ж сколько работы, да и вероятность где-то пропустить достаточна высокая

что там можно упустить, если абсолютно все обработчики весят на body?

Цитата:

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

таких строк в проекте встречается 20, 50, 100 раз

да хоть 9000, всё равно обработчик то один. а приведённый пример JQ, кстати, будет обходить все эти элементы :)

Цитата:

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

с другой - часто удобно смотря на элемент в исходнике страницы понимать чем он обрабатывается (Хотя бы по классу

а ещё легче понять, когда перед тобой (глазами, т.е.) висит хеш, где ключ - селектор, а функция - значение. так ещё проще понять, что, куда и зачем.

Цитата:

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

При обработке на body как раз класс или id нужен, только искать уже теперь придётся не по всему коду, а только в обработчиках body

JQ засирает элементы, давая им всем ID (или другой атрибут), коим является рандомное число. это число используется для $.data, и, как Вы уже поняли, для лёгкого делегирования. Вывод сделайте сами :)

Цитата:

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

Вроде очень даже удобная схема получается

можно сделать проще - как я имел в виду.

Цитата:

Сообщение от melky (Сообщение 189747)

<script>
function rand () {
    return 255 * Math.random() | 0;
}

function delegater (e) {
    e = e || event;
    e = e.target || e.srcElement;
    e.style.backgroundColor = "rgb("+ rand() +", " + rand() + ", " + rand() + ")";
}
</script>

<body *!*onclick="delegater(event)"*/!*>
    <div>DIV</div>
    <p>P</p>
    <a href="#">A</a>
</body>

потестировал в IE10 в режиме эмуляции IE7, и во всех свежаках. работает :)

единственная проблема возникнет, когда захочется проделегировать НЕвсплывающие события - к хорошему быстро привыкаешь

Цитата:

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

можно сделать проще - как я имел в виду.

Ну почти тоже самое.
Только если для каждого элемента задавать разные обработчики, то всё равно их придётся как-то распознавать (например, по классу или id)