Question

我在html和javascript方面不是很先进。我只是想了解一下，skyscanner搜索航班按钮的工作原理。没有onclick event或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

没有与之关联的onclick事件或功能。

可能有，它只是：

添加了JavaScript代码，而不是标记;和/或
在祖先元素

最有可能是＃1。

Re＃1：使用onclick属性，这只是将事件处理程序放在按钮上的一种方式，而且这是最好避免的方式。相反，您通过addEventListener（或旧版IE上的attachEvent）使用现代事件处理。这可能是直接使用DOM，也可能是通过jQuery，MooTools，React，Vue等库...

直接使用DOM的示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Re＃2：click个事件 bubble 来自用户点击该元素的祖先元素的元素，一直到文档元素（{{ 1}}）。因此，您可以在祖先元素上处理该事件，而不是在按钮本身上处理。处理祖先元素上的事件有时被称为＆＃34;事件委托。＆＃34;

示例：

＆＃13;

html

＆＃13;

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

＆＃13;

Answer 2

脚本可能是在一个按钮上调用＆＃34; js-search-button＆＃34;类。如果您可以使用任何脚本来使用它，则无需在HTML元素中插入一个处理程序。

Answer 3

您可以使用jQuery或JavaScript附加活动。

下面是attach click event to static element。

$('button[class="fss-bpk-button fss-bpk-button--large js-search-button"]').click(function(){
  console.log("clicked!!!");
});

如果您的元素为dynamic，那么您需要delegate event。

$(document).on('click', 'button[class="fss-bpk-button fss-bpk-button--large js-search-button"]', function(){
  console.log("clicked!!!");
});

希望这会对你有所帮助。

没有href，html按钮的onclick函数

3 个答案: