Question

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

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

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

Answer 1

请尝试以下操作。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 2

使用getElementsByTagName和addEventListener

如果我理解正确的话，应该这样做。

Answer 3

您可以使用for..of loop，li来迭代data-*元素，设置事件侦听器; element.dataset获取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;
  })
})

可选地

<tbody>

Answer 4

这更像是jQuery所发生的事情。

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

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>

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

4 个答案: