我不知道这些按钮是如何做的......
<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 位置?我真的很困惑!
最佳答案
开发者可能使用了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>
关于javascript - 如果没有 onclick 事件处理程序,HTML 按钮如何执行任何操作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57563037/