如何在纯JavaScript中选择嵌套元素？

Question

这可能是一件简单的事情，但我正在为如何在单击事件上瞄准一个元素而奋斗。我让它与jQuery一起工作，但我想用纯JavaScript来实现它。基本上，我有一份清单：

  <ul class= 'my-todo-list'>
     <li id="todo-1" class="todo">
            <div class="actions">
                <a href="#" class="edit">Edit</a>
                <a href="#" class="delete">Delete</a>
            </div>
     </li>
     <li id="todo-2" class="todo">
            <div class="actions">
                <a href="#" class="edit">Edit</a>
                <a href="#" class="delete">Delete</a>
            </div>
     </li>
     <li id="todo-3" class="todo">
            <div class="actions">
                <a href="#" class="edit">Edit</a>
                <a href="#" class="delete">Delete</a>
            </div>
     </li>
  </ul>

我的JavaScript看起来是这样的：

 document.querySelector('.todo a.delete').addEventListener('click', function(e){
    
    var listElement = this.parentNode.parentElement;
    var todoId = listElement.getAttribute('id').replace('todo-','');
    alert(todoId);
 });

我想要的是，如果我点击一个删除链接，我应该看到id的待办事项。例如，如果我点击第二个删除链接，我应该提醒"todo-2“。

注意:我尝试过document.querySelector('.todo a.delete')，但也没有成功。

使用jQuery的简单解决方案是

 $('.todo a.delete').live('click', function(){......})

但我想用纯JavaScript来做。我怎么能这么做？

Answer 1

可以在ul元素上添加事件侦听器，并检查触发单击事件的元素是否包含delete类。如果是，则从包装触发事件的特定元素的li元素中获取li属性。

​

const $ul = document.querySelector('ul');

$ul.addEventListener('click', (e) => {
  if (e.target.matches('a.delete')) {
    const li = e.target.parentElement.parentElement;
    const id = li.getAttribute('id');
    alert(id);
  }
});

<ul>
     <li id="todo-1" class="todo">
            <div class="actions">
                <a href="#" class="edit">Edit</a>
                <a href="#" class="delete">Delete</a>
            </div>
     </li>
     <li id="todo-2" class="todo">
            <div class="actions">
                <a href="#" class="edit">Edit</a>
                <a href="#" class="delete">Delete</a>
            </div>
     </li>
     <li id="todo-3" class="todo">
            <div class="actions">
                <a href="#" class="edit">Edit</a>
                <a href="#" class="delete">Delete</a>
            </div>
     </li>
  </ul>

​

Answer 2

您可以使用querySelectorAll和map将事件映射为

[...document.querySelectorAll('.todo a.delete')].map((item) => {
    item.addEventListener('click', function(e){

    var listElement = this.parentNode.parentElement;
    var todoId = listElement.getAttribute('id').replace('todo-','');
    alert(todoId);
    })
 });

​

[...document.querySelectorAll('.todo a.delete')].map((item) => {
    item.addEventListener('click', function(e){

    var listElement = this.parentNode.parentElement;
    var todoId = listElement.getAttribute('id').replace('todo-','');
    alert(todoId);
    })
 });

<ul class= 'my-todo-list'>
     <li id="todo-1" class="todo">
            <div class="actions">
                <a href="#" class="edit">Edit</a>
                <a href="#" class="delete">Delete</a>
            </div>
     </li>
     <li id="todo-2" class="todo">
            <div class="actions">
                <a href="#" class="edit">Edit</a>
                <a href="#" class="delete">Delete</a>
            </div>
     </li>
     <li id="todo-3" class="todo">
            <div class="actions">
                <a href="#" class="edit">Edit</a>
                <a href="#" class="delete">Delete</a>
            </div>
     </li>
  </ul>

​

Answer 3

有时，当没有传播时，使用事件目标可能无法工作。下面是我制作的一个脚本，它在所有浏览器中都是100%工作的，而且使用起来也很容易：

(It works even with dynamic elements just like jQuery)

​

// Advanced custom dynamic real time event handler listener supported 100% cross-browsers
String.prototype.addRTListener = function(events, renderingFunction){
    let selectors = this.toString();
    events = events.trim().split(' ');
    for(let even of events){
        even = even.trim();
        if(even.length>0){
            switch(even){
                case "focus":
                    even = "focusin";
                break;
                case "blur":
                    even = "focusout";
                break;
            }
            document.addEventListener(even, function(e){
                const path = e.path;
                document.querySelectorAll(selectors).forEach(function(element){
                    for(let target of path){
                        if( target == element ){
                            if( renderingFunction && typeof renderingFunction == "function" ){
                                renderingFunction(target, e);
                            }
                            break;
                        }
                    }
                });
                return;
            });
        }
    }
    
}

<button id="testBtn">Click Me</button>

<script>

// We can add DOMContentLoaded eventListener just in case our script loads after the DOM other wise you could always load your script before and it should work just like a charm
document.addEventListener('DOMContentLoaded', ()=>{

  // it supports multiple events too
  "#testBtn".addRTListener('focus dblclick', (target, e)=>{
    console.log( target ); 
  });
  
});

</script>

​