为 Javascript / HTML 中的按钮设置事件处理程序

Question

我想为所有"添加"按钮设置事件处理程序。

Answer 1

你对香草JS片段好吗？ 类似这些内容可以：

function registerHandlers () {
var buttons = document.querySelectorAll('.button');
[].slice.call(buttons).forEach(function (button) {
button.addEventListener('click', onClick, false);
});
}
function onClick (event) {
event.preventDefault();
var button = event.target;
var id = button.id;
var desc = document.getElementById(id + '-img').getAttribute('title');
var qty = document.getElementById(id + '-qty').value;
addToTable(desc, qty);
}
function addToTable (desc, qty) {
var row = '<tr><td align="left">' + desc + '</td><td align="right">' + qty + '</td></tr>';
var tbody = document.querySelector('#orderlist tbody');
tbody.innerHTML = tbody.innerHTML + row;
}
registerHandlers();

代码未经测试：-( 但这是它的工作原理：

注册处理程序：

1. 查找页面上具有类"按钮"的所有元素(通过CSS选择器(
2. 使用 [].slice.call 将 NodeList 中的结果转换为数组。
3. 遍历列表并注册一个事件侦听器以"单击"该元素。

点击：

1. 停止浏览器的默认行为。
2. 通过检查事件的目标属性来确定单击的按钮。
3. 获取关联的 ID 属性的值。
4. 为图像构建选择器字符串，在整个文档中搜索它。读取找到的图像的title属性。(如果未找到此类元素，这可能会崩溃(。
5. 与数量相同。
6. 更新表。

添加表：

1. 构建一个字符串，中间有desc和qty。您可能希望通过使用createElement或DOMParser来投入更多的精力，并以这种方式进行一些健全性检查。
2. 找到订单列表的<tbody>。
3. 将其innerHTML附加到新行中。

最后调用 registerHandler 以使上述工作。