提问人：j-grimwood 提问时间：5/29/2014 更新时间：12/28/2014 访问量：256
使此 JS 代码不显眼。为未知 ID 编写事件侦听器
Making this JS code unobtrusive. Writing an event listener for unknown id
问：
我一直在构建此 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();
}
答：
2赞
Luke
5/29/2014
#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;
// ...
});
});
1赞
Bart Jedrocha
5/29/2014
#2
使用 jQuery，这将是
$( document ).ready(function() {
$( '#gal' ).on( 'click', 'li', function() {
var id = this.id
});
});
这种方法的好处是，您只有一个事件处理程序（在 ul 上定义），而不是每个 li 都有一个事件处理程序。希望这会有所帮助。
2赞
phenomnomnominal
5/29/2014
#3
jQuery解决方案：
$('#gal li').on('click', function () {
var className = $(this).attr('class');
var id = this).id;
console.log(className, id);
});
香草溶液：
[].forEach.call(document.querySelectorAll('#gal li'), function (glyphicon) {
glyphicon.addEventListener('click', function () {
var className = glyphicon.className;
var id = glyphicon.id
console.log(className, id);
});
});
这是一个包含这两个例子的小提琴。
评论