使用特定选择器在单击时添加事件处理程序

Question

我正在尝试在 li 选择器上的文档上添加事件处理程序。在 JQuery 中，这将起作用：

$('li').click(function(){
   var justify = $(this).attr('data-cid');
   alert(justify);
});

如何在 JavaScript 中执行 完全相同的 操作？

Answer 1

使用getElementsByTagName and addEventListener

如果我理解正确，那应该可以解决问题。

Answer 2

可以使用document.querySelectorAll("li")、for..of loop迭代li个元素，设置事件监听器； element.dataset获取data-*属性值

for (let li of document.querySelectorAll("li")) {
  li.addEventListener("click", function() {
      let justify = this.dataset.cid;
  })
}

或者

var li = [].slice.call(document.querySelectorAll("li"));

li.forEach(function(el) {
  el.addEventListener("click", function() {
      var justify = this.dataset.cid;
  })
})

Answer 3

尝试如下。

var lis = document.getElementsByTagName('li');

for(var i = 0; i < lis.length; i++) {
  (function(i) {
    lis[i].addEventListener('click', function() {
      alert(this.dataset.cid);
    }, false);
  })(i);
}

<ul>
  <li data-cid="1">1</li>
  <li data-cid="2">2</li>
  <li data-cid="3">3</li>
  <li data-cid="4">4</li>
  <li data-cid="5">5</li>
</ul>

Answer 4

这更像是 jQuery 的情况。

它将单个事件绑定到 window 并检查事件目标是什么，如果找到匹配项，它将触发回调，并将上下文设置为单击的元素。

const $ = function(selector) {
  const listeners = {}
  const bindListener = function(event) {
    listeners[event] = []
    window.addEventListener(event, function (e) {
      // iterate through the subscribed events to find any matching selectors
      const matches = listeners[event].filter(x => e.target.matches(x.selector))
      if (matches) {
        matches.forEach(x => x.cb.call(e.target, e))
      }
    })
  }
  // bind a single event listener to the window for each event type
  bindListener('click')
  bindListener('mouseover')
  // return your api
  return {
    on(event, cb) {
      listeners[event].push({ selector, cb })
    },
    off(event, cb) {
      listeners = listeners[event].filter(x => x.cb !== cb)
    }
  }
}


$('li').on('click', function(e){
  console.log(this.dataset.cid)
})

$('li:first-of-type').on('mouseover', function (e) {
  console.log('mouseover first li', this.dataset.cid)
})

$('li:last-of-type').on('click', function (e) {
  console.log('clicked last li', this.dataset.cid)
})

<ul>
  <li data-cid="foo">foo</li>  
  <li data-cid="bar">bar</li>
  <li data-cid="baz">baz</li>
</ul>

使用特定选择器在单击时添加事件处理程序

Add event handler on click with specific selector

javascript

jquery

selector