Question

＆＃13;

var ul = document.getElementById("parent-list");
document.querySelectorAll("#parent-list li").onclick = function() {

  alert('click!');

}

＆＃13;

<ul id="parent-list">
  <li id="item-1">Item 1</li>
  <li id="item-2">Item 2</li>
  <li id="item-3">Item 3</li>
  <li id="item-4">Item 4</li>
  <li id="item-5">Item 5</li>
  <li id="item-6">Item 6</li>
  <li id="item-7">Item 7</li>
  <li id="item-8">Item 8</li>
  <li id="item-9">Item 9</li>
</ul>

＆＃13;

当我点击＆＃34; li＆＃34;时，我试图点击该项目的提示弹出窗口。仅使用javascript的元素。我知道如何在jquery中做，但我无法弄清楚如何使用javascript。

小提琴：https://jsfiddle.net/7jcksznz/1/

Answer 1

querySelectorAll返回HTML集合。您需要将事件附加到每个事件。你需要循环遍历集合。

var lis = document.querySelectorAll("#test li");
for (var i = 0; i < lis.length; i++) {
  lis[i].addEventListener("click", function() {
    console.log(this.innerHTML);
  });
}

<ul id="test">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

更好的选择是在UL上添加一次单击并使用该事件来确定单击了哪个li。

document.getElementById("test").addEventListener("click", function(event) {
  var li = event.target;
  console.log(li.innerHTML);
});

<ul id="test">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

Answer 2

document.querySelectorAll("#parent-list li") get a collection of HTMLElement,so,you can do like this：
window.onload = function()
    {
        var ul = document.getElementById("parent-list");

        ul.onclick = function(e)
        {
            if(e.target.tagName = "LI")
            {
                alert(1);
            }
        }

    }

Answer 3

querySelectAll返回节点数组。你必须迭代节点才能添加事件列表器。

var ul = document.getElementById("parent-list");
var li_items = document.querySelectorAll("#parent-list li");
for (var i = 0 ; i < li_items.length ; i++)
    li_items[i].onclick = function (){alert(this.id);}

Answer 4

使用针对每个元素的事件监听器，而不是直接将onclick函数分配给NamedNodeMap。

/* get an array of list items */
var items = Array.prototype.slice.call(
      document.querySelectorAll('li[id|="item"]')
);

/* add event-listener to each item */
items.forEach(function(item) {
    item.addEventListener('click', clickAlert, false);
});

/* click function */
function clickAlert(evt) {
    alert(evt.target.id +' clicked!');
}

<强> 见：

Javascript：从UL

4 个答案: