javascript - 将事件附加到子元素

Question

<div class="tabContainer">
  <ul class="Tabs" id="tabset">
    <li id="tab1" class="selected" onclick="tabs(this)">Home</li>
    <li id="tab2" onclick="tabs(this)">Tab 2</li>
    <li id="tab3"  onclick="tabs(this)">Tab 3</li>
  </ul>
</div>

我想删除 onclick="tabs(this)" 并将其变成一个事件。我怎样才能做到这一点？目前，以下代码是我的解决方案，但无法正常工作。

var h=$("tabset").children;
for (i=0;i<h.length;i++) h[i].onclick=tabs(this);

哦，不要使用 jquery，但是 var $ = function(x){return document.getElementById(x)};注意:我需要 (this) 部分。

Answer 1

您似乎在代码中使用了一些非标准的 $ 函数。例如，如果您使用的是 jQuery，您的代码可能如下所示:

$('#tabset li').on('click', tabs);

如果您不想使用 jQuery，那么您将不得不调整您的选择器:

var h = document.getElementById('tabset').getElementsByTagName('li');
for (var i = 0; i < h.length; i++) {
    h[i].onclick = tabs;
}

或者自从你声明:

var $ = function(x){
    return document.getElementById(x)
};

您还可以使用:

var h = $('tabset').getElementsByTagName('li');
for (var i = 0; i < h.length; i++) {
    h[i].onclick = tabs;
}