javascript - 为Javascript / HTML中的按钮设置事件处理程序(Setting up event handlers for buttons in Javascript / HTML)

Question

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

  ask by nerdy translate from so

Answer 1

are you fine with a Vanilla JS snippet?

(您对Vanilla JS代码段满意吗？)

Something along these lines would do:

(遵循这些原则可以做到：)

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();

The code is untested :-) But here's how it works:

(该代码未经测试:-)但是它是这样工作的：)

registerHandlers:

(registerHandlers：)

1. Find all elements on the page which have the class "button" (via CSS Selector)

   (在页面上找到所有具有“按钮”类的元素（通过CSS选择器）)

2. Turn the results from a NodeList into an Array using [].slice.call .

   (使用[] .slice.call将结果从NodeList转换为Array。)

3. Go over the list and register an event listener for "click"s on that element.

   (遍历列表，并为该元素上的“ click”注册一个事件侦听器。)

onClick:

(onClick：)

1. Stop the default behaviour of the browser.

   (停止浏览器的默认行为。)

2. Determine the clicked button by inspecting the target property of an event .

   (通过检查事件的目标属性来确定单击的按钮。)

3. Get the associated ID attribute's value.

   (获取关联的ID属性的值。)

4. Build the selector string for the image, search the whole document for it.

   (构建图像的选择器字符串，在整个文档中搜索它。)

   Read the title attribute of the found image.

   (阅读找到的图像的title属性。)

   (This can crash if no such element was found).

   (（如果找不到这样的元素，则可能会崩溃）。)

5. Same with the Quantity.

   (与数量相同。)

6. Update the table.

   (更新表。)

addToTable:

(addToTable：)

1. Build a string with the desc and qty in between.

   (用desc和qty之间的字符串构建一个字符串。)

   You might want to put more effort by using createElement or DOMParser and get some sanity checks that way.

   (您可能想通过使用createElement或DOMParser付出更多的努力，并以此方式进行一些健全性检查。)

2. Find the <tbody> of the orderlist.

   (找到订单清单的<tbody> 。)

3. Append it's innerHTML with your new row.

   (将它的innerHTML追加到新行中。)

Finally call registerHandler to make the above work.

(最后，调用registerHandler进行上述工作。)