javascript - 如果没有 onclick 事件处理程序，HTML 按钮如何执行任何操作？

Question

我不知道这些按钮是如何做的......

<div class="ui-dialog-buttonset">
    <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
        <span class="ui-button-text">Cancel</span>
    </button>
    <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
        <span class="ui-button-text">Save</span>
    </button>
</div>

我想查看他们为取消和保存而执行的代码，但没有事件处理程序，所以我无法弄清楚代码所在的位置...是否有可能隐藏的 secret 位置？我真的很困惑!

Answer 1

开发者可能使用了addEventListener方法而不是内联 HTML 处理程序。当您这样做时，事件监听器直接添加到 JavaScript 中(根本不需要标记 HTML)。

此外，重要的是要提到 event delegation .如果您实现此技术，那么每个单独的按钮都不需要它自己的处理程序 - 您可以简单地创建一个事件处理程序函数，将其应用于父 DOM 元素，然后检查 e.target 以访问事件开始传播的元素。

例如这样的事情:

const onClick = e => console.log(`You clicked ${e.target.textContent}`);
document.querySelector('div').addEventListener('click', onClick);

<div class="ui-dialog-buttonset">
  <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
        <span class="ui-button-text">Cancel</span>
    </button>
  <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
        <span class="ui-button-text">Save</span>
    </button>
</div>