javascript - 使这段 JS 代码不引人注目。为未知 id 编写事件监听器

Question

我一直在构建此 UI 的功能。我想为这些选项卡编写一个监听器，以使我的 js 不引人注目。它阻碍了我前进。现在我正在重构，是时候修复它了。我想编写一个事件监听器来获取被单击的选项卡的 id，并将其分配给一个变量。这就是我所拥有的:

<ul id="gal">

   <li class="glyphicons camera active" onclick="pullActive(this.id);" id="viewAll"><a href="#" ><i></i> View all photos <strong>(43)    </strong></a>
   </li>
   <li class="glyphicons circle_plus tab-stacked" onclick="pullActive(this.id);" id="addPhotos"><a href="#"><i></i> <span>Add Photos</span></a>
   </li>
</ul>

function pullActive(id){

 // gets the class for that id
  var getClassy = document.getElementById(id).className;
  findClass(getClassy, id);
  loadNew();

}  

Answer 1

如果没有 jQuery，你就必须这么做

var item = document.querySelector("#gal");
item.attachEventHandler("click", function(ev) {
   if (ev.target.tagName === "LI") {
      var id = ev.target.id;
      // ...
   }
});

在jquery中(当你像这样标记你的问题时)它看起来像这样

$(function() {
   $("#gal").delegate("li", "click", function() {
      var id = this.id;
      // ...
   });
});