Question

我目前无法理解这段代码的用途

str.upper()

我理解第一部分应该按照

的方式进行

str.join

但是我很难理解$("#table").on("click", ".plusRow", function(event){ var name = this.getAttribute("table-data"); tableData.addData(name, 0, 1); displayTable(); });类应该去哪里，它是否被添加到eventlistener中？或者如何将此代码更好地转换回常规Javascript。

Answer 1

此代码片段将侦听器绑定在单个元素（表）上并将其委托给其子元素，这意味着它只会在事件处理程序冒泡到一个或多个与谓词匹配的元素时运行它（具有＆＃34; plusRow＆＃34; class）。

通过事件委派，您可以：

let table = document.getElementById('table');
table.addEventListener('click', event => {
    const elem = event.target;
    if (elem.classList.contains('plusRow')) {
        const name = elem.getAttribute("table-data");
        tableData.addData(name, 0, 1);
        displayTable();
    }
});

这里我们必须记住，当单击表的子节点时，此代码将始终运行，但只有在目标与谓词匹配时才更新表。

如果不使用事件委派，您可以执行以下操作，这些结果会有类似的结果，但行为却完全不同：

let tableElem = document.getElementById('table');
// To keep this simple we assume there is only one button
let button = tableElem.getElementsByClassName('plusRow')[0];

button.addEventListener('click', event => {
    const name = event.currentTarget.getAttribute("table-data");
    tableData.addData(name, 0, 1);
    displayTable();
})

这个版本只会在表格的第一个孩子的＃34; plusRow＆＃34;点击。请注意，这只是一个示例，因为如果没有具有此类的元素，当我们尝试绑定事件侦听器时将引发异常。

Answer 2

所以我使用querySelector和querySelectorAll想出了一个虚拟可能的解决方案示例。如果有人发现建议的解决方案存在问题，请与我们联系。

function delegate(parentSelector, eventType, childSelector, callback) {
  //lookup the parent element
  var parent = document.querySelector(parentSelector);

  //put the event listener for the event on the parent
  parent.addEventListener(eventType, function(event) {
    //get the element that caused the event
    var element = event.target;
    //find all the children in the parent that match the child selector,
    //at this point in time
    var children = parent.querySelectorAll(childSelector);

    //if the element matches a child of the parent that matched the
    //childSelector, we want to do our callback
    for (var i = 0; i < children.length; i++) {
      if (children[i] === element) {
        callback();
        break;
      }
    }
  });
}

delegate('#table', 'click', '.addRow', function() {
  document.querySelector('#table').innerHTML += `
    <tr>
      <td>Something</td>
      <td><button class="addRow">Add Row</button></td>
    </tr>
  `;
});

<table id="table">
  <tr>
    <td>Something</td>
    <td><button class="addRow">Add Row</button></td>
  </tr>
</table>

需要帮助将此JQuery代码转换回原始Javascript

2 个答案: