javascript - 没有 href，html 按钮的 onclick 函数

Question

我对 html 和 javascript 不太了解。我只是想了解 skyscanner 搜索航类按钮的工作原理。没有与之关联的 onclick 事件 或 function。谁能帮帮我？

<button class="fss-bpk-button fss-bpk-button--large js-search-button" tabindex="1" type="button">
    <span class="bpk-text">Search flights</span>
    <span class="bpk-icon-lg bpk-icon-pointer bpk-icon-lg--align-to-button"></span>
</button>

Answer 1

There is no onclick event or function associated with it.

可能有，只是:

1. 添加了 JavaScript 代码，而不是标记；和/或

2. 在祖先元素上

最有可能是#1。

Re #1:使用 onclick 属性等只是将事件处理程序放在按钮上的一种方法，最好避免这种方法。相反，您通过 addEventListener 使用现代事件处理(或旧 IE 上的 attachEvent)。这可能是直接使用 DOM，或者通过 jQuery、MooTools、React、Vue 等库......

直接使用 DOM 的例子:

document.querySelector(".my-button").addEventListener("click", function() {
  console.log("Click!");
});

<button type="button" class="my-button">Click Me</button>

回复 #2:click 事件 bubble 从用户点击的元素到该元素的祖先元素，一直到文档元素( html).因此您可以在祖先元素上处理该事件，而不是在按钮本身上。处理祖先元素上的事件有时称为“事件委托(delegate)”。

例子:

document.querySelector(".container").addEventListener("click", function(e) {
  console.log("Click on '" + e.target.textContent + "'!");
});

<div class="container">
  This div contains two buttons. The event handler is on the div, not the buttons.
  <div>
    <button type="button">One</button>
    <button type="button">Two</button>
  </div>
</div>