我在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>
答案 0 :(得分:2)
没有与之关联的onclick事件或功能。
可能有,它只是:
添加了JavaScript代码,而不是标记;和/或
在祖先元素
最有可能是#1。
Re#1:使用onclick
属性,这只是将事件处理程序放在按钮上的一种方式,而且这是最好避免的方式。相反,您通过addEventListener
(或旧版IE上的attachEvent
)使用现代事件处理。这可能是直接使用DOM,也可能是通过jQuery,MooTools,React,Vue等库...
直接使用DOM的示例:
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;
示例:
html
&#13;
document.querySelector(".container").addEventListener("click", function(e) {
console.log("Click on '" + e.target.textContent + "'!");
});
&#13;
答案 1 :(得分:0)
脚本可能是在一个按钮上调用&#34; js-search-button&#34;类。如果您可以使用任何脚本来使用它,则无需在HTML元素中插入一个处理程序。
答案 2 :(得分:0)
您可以使用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!!!");
});
希望这会对你有所帮助。