如果没有 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>

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

Answer 1

开发人员可能使用addEventListener方法而不是内联 HTML 处理程序。当您这样做时，事件侦听器会直接添加到 JavaScript 中（根本不需要标记 HTML）。此外，重要的是要提到事件委托。如果你实现了这个技术，那么每个单独的按钮就不需要它自己的处理程序——你可以简单地创建一个事件处理程序函数，将它应用到父 DOM 元素，然后检查e.target对事件开始传播的元素的访问。像这样的东西，例如：const onClick = e => console.log(`You clicked ${e.target.textContent}`);document.querySelector('div').addEventListener('click', onClick);<div class="ui-dialog-buttonset">&nbsp; <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">&nbsp; &nbsp; &nbsp; &nbsp; <span class="ui-button-text">Cancel</span>&nbsp; &nbsp; </button>&nbsp; <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">&nbsp; &nbsp; &nbsp; &nbsp; <span class="ui-button-text">Save</span>&nbsp; &nbsp; </button></div>

Answer 2

我找到了一个脚本，认为我不确定它实际上来自哪里，因为它有一个神秘的名称“VM9850：格式化”。无论如何，它包含以下代码，它似乎是按钮的事件处理程序：&nbsp;buttons: {&nbsp; &nbsp; Cancel: function() {&nbsp; &nbsp; &nbsp; &nbsp; cdg();&nbsp; &nbsp; },&nbsp; &nbsp; Save: function() {&nbsp; &nbsp; &nbsp; &nbsp; // etc&nbsp; &nbsp; }

Answer 3

按钮实际上可以在不使用 JS 事件处理程序的情况下做一些事情，例如显示一些消息.msg { display: none }#cancelBtn:focus&nbsp; + .msg{&nbsp; &nbsp; display: block;}#saveBtn:focus + .msg{&nbsp; &nbsp; display: block;}<div class="ui-dialog-buttonset">&nbsp; &nbsp; <button type="button" id="cancelBtn" role="button">&nbsp; &nbsp; &nbsp; &nbsp; <span class="ui-button-text">Cancel</span>&nbsp; &nbsp; </button>&nbsp; &nbsp; <div class="msg">You choose CANCEL!</div><br>&nbsp; &nbsp; <button type="button" id="saveBtn" role="button">&nbsp; &nbsp; &nbsp; &nbsp; <span class="ui-button-text">Save</span>&nbsp; &nbsp; </button>&nbsp; &nbsp; <div class="msg">You choose SAVE!</div>&nbsp; &nbsp;&nbsp;</div>或提交表格<form action="/action_page.php" method="get" id="form1">&nbsp; First name: <input type="text" name="fname"><br>&nbsp; Last name: <input type="text" name="lname"><br></form><button type="submit" form="form1" value="Submit">Submit</button>