как добавить 1 прослушиватель событий для вложенных элементов - PullRequest
Новая
       43

как добавить 1 прослушиватель событий для вложенных элементов

0 голосов
/ 21 мая 2018

У меня есть HTML-код ниже: 

<!DOCTYPE html>
        <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            <div>
                <section>
                    <a>first</a>
                    <a>second</a>
                </section>
            </div>
            <section>
                <a>third</a>
                <a>fourth</a>
            </section>
            <section>
                <div>
                    <a>fifth</a>
                    <a>sixth</a>
                </div>
            </section>
        <script src="ex-2-a.js"></script>
        <!--<script src="ex-2-b.js"></script>-->
        </body>
        </html>

Я хочу добавить только один прослушиватель событий ко всему документу, который бы ловил только теги 'a', у которых в качестве предков есть тег 'div'.Это означает, что если я нажму первый, второй, пятый и шестой, я получу сообщение «круто».

Есть идеи на этот счет, поскольку нет идентификатора и работа только с тэгами?

Ответы [ 2 ]

0 голосов
/ 22 мая 2018

Спасибо @Scott Marcus за помощь.Я представил ответ, и это сработало.Я также нашел новый подход с использованием .closest ().дайте мне знать ваши мысли 

document.addEventListener('click',(e)=>{
let currElm = e.target;
if (currElm.closest('div')) {
  console.log(currElm);
 }
});
0 голосов
/ 21 мая 2018

Используя «делегирование событий» (установив обработчик событий для элемента, находящегося высоко в дереве DOM, и позволяя событиям из нижних элементов дерева всплывать и быть захваченными), мы можем настроить простоодин обработчик события на уровне body, а затем мы можем проверить фактический источник всплывающего события по коллекции элементов, соответствующих вашим критериям.

См. встроенные комментарии для получения дополнительной информации: 

// Set the event listener at the <body> and wait for other
// events to bubble up to it.
document.body.addEventListener("click", function(evt){
  // Get an array of all the <a> elements that are descendants of <div> elements
  let matches = Array.prototype.slice.call(document.querySelectorAll("div a"));
  
  // Test to see if array contains the one that was clicked
  if(matches.includes(evt.target)){
    console.log("You clicked an <a> that is a descendant of a <div>!");
  }
});
<div>
  <section>
    <a>first</a>
    <a>second</a>
  </section>
</div>

<section>
  <a>third</a>
  <a>fourth</a>
</section>

<section>
  <div>
    <a>fifth</a>
    <a>sixth</a>
  </div>
</section>
...