Форум

bes · #21 (**permalink**) 19.07.2012, 14:11

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

<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>

melky · #22 (**permalink**) 19.07.2012, 15:25

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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, и во всех свежаках. работает

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

bes · #23 (**permalink**) 19.07.2012, 15:34

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

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

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

Форум

Справочник

Discord чат

Курсы javascript