Форум

Valdemor · #1 (**permalink**) 10.07.2013, 22:32

Пишу обработчик событий, использующий делигирование. Но возникла проблема.
Вот функция:

function click(selector, callback) {
var temp = function(e) {
   e = e || window.event;
   var target = e.target || e.srcElement;
   if(target.matches(selector)) callback();
}
document.addEventListener("click", temp, false);
}

При этом, я хочу, чтобы срабатывание шло от самого "глубокого" элемента DOM. Т.е. если я поставлю обработчики и на div, и на body, то обработчик div должен сработать первым, несмотря на место в коде. У меня же выходит, что место в коде отыгрывает наибольшую роль.
Как же быть? Как это реализирует jQuery, к примеру? Берет огромный массив обработчиков и положения объектов?

cyber · #2 (**permalink**) 11.07.2013, 14:11

Valdemor, не совсем понятно, что не так, всплытие идет от элемента на котором произошло событие и html (или body не помню)

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    
    
    <div id='t1'>
      <div id='t2'>
      
       <div id='t3'>click me</div>
      </div>
    
    </div>

    <script>

var one = document.getElementById('t1');
      
      one.onclick = function () {
      
       alert(1)
      };

      var two = document.getElementById('t2');
      
      two.onclick = function () {
      
       alert(2)
      };
      
      
      var three = document.getElementById('t3');
      
      three.onclick = function () {
      
       alert(3)
      };
      
      
      
      
      document.body.onclick = function () {
      
       alert('body')
      };

    </script>

  </body>
</html>

Valdemor · #3 (**permalink**) 11.07.2013, 14:40

Мне нужно использовать именно addEventListener.

cyber · #4 (**permalink**) 11.07.2013, 14:52

Valdemor, а , ну так target не будет меняться в нем будет элемент по которому кликнули, что бы получить текущий элемент на котором сработало событие используйте this

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    
    
    <div id='t1'>
      <div id='t2'>
      
       <div id='t3'>click me</div>
      </div>
    
    </div>

    <script>

var one = document.getElementById('t1');
var two = document.getElementById('t2');
var three = document.getElementById('t3');      
  
      
    one.addEventListener('click', divDelegation);
    two.addEventListener('click', divDelegation);
    three.addEventListener('click', divDelegation);
      
      function divDelegation(e){
        
      
        alert(this.id);
        
      }
     
      
      document.body.addEventListener('click', function () {
      
        alert('body');
      
      });  
      
      

    </script>

  </body>
</html>

Valdemor · #5 (**permalink**) 11.07.2013, 21:03

Точно! Не по target, а по this! Спасибо!

Форум

Справочник

Discord чат

Курсы javascript