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

  <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 2

我找到了一个脚本，认为我不确定它实际上来自哪里，因为它有一个神秘的名称“VM9850：格式化”。无论如何，它包含以下代码，它似乎是按钮的事件处理程序：

 buttons: {

    Cancel: function() {

        cdg();

    },

    Save: function() {

        // etc

    }

Answer 3

按钮实际上可以在不使用 JS 事件处理程序的情况下做一些事情，例如显示一些消息

.msg { display: none }

#cancelBtn:focus  + .msg{

    display: block;

}

#saveBtn:focus + .msg{

    display: block;

}

<div class="ui-dialog-buttonset">

    <button type="button" id="cancelBtn" role="button">

        <span class="ui-button-text">Cancel</span>

    </button>

    <div class="msg">You choose CANCEL!</div><br>

    <button type="button" id="saveBtn" role="button">

        <span class="ui-button-text">Save</span>

    </button>

    <div class="msg">You choose SAVE!</div>    

</div>

或提交表格

<form action="/action_page.php" method="get" id="form1">

  First name: <input type="text" name="fname"><br>

  Last name: <input type="text" name="lname"><br>

</form>

<button type="submit" form="form1" value="Submit">Submit</button>