javascript - 我可以将 HTML 元素绑定(bind)到 js 函数(而不是其他方式)吗？

Question

使用 jQuery，我可以在 HTML 中执行类似的操作

<button id="click_me" type="button">Hello</button>

这是 js 中的

$('#click_me').on('click', function() {alert('Hello')});

但我想以相反的方式进行关联。例如。 HTML 中类似这样的内容

<button function="click_me" type="button">Hello</button>

这是 js 中的

function click_me() {alert('Hello')};

是否有任何本地方法可以做到这一点，或者有一个库/框架可以做到这一点(我只知道一点点 jQuery)？将参数传递给 click_me 怎么样？如果 click_me 是其他命名空间的成员(即 click_me 不是全局名称)，我如何告诉 HTML 有关此命名空间的信息？我最终会得到与使用 jQuery 方式一样多的事件监听器吗？ (如果使用 jQuery，我将有很多事件监听器并且更喜欢事件委托(delegate))

Answer 1

您可以使用所谓的“传统事件注册”，这就是 @user3218194 评论和 Tsalikidis 回答的内容。但在现代 Web 开发中并不推荐这样做，因为它混合了页面的呈现和逻辑，并且在过去造成了很多维护问题(更不用说无法为同一事件类型注册更多的事件监听器)。

如果您确实无法忍受注册监听器，请使用事件委托(delegate):

<button data-behavior="click_me" type="button"></button>

jQuery:

$(document).on("click", "button[data-behavior='click_me']", function() {
    // Note: when using event delegation in jQuery, the keyword 'this' refers to the
    // target element, not the element 'on' has been called on (document in this case)
    alert("Hello, " + this.tagName); // should alert "Hello, BUTTON"
});

如果您一劳永逸地执行此操作，即使是新添加的 data-behavior="click_me" 按钮也会触发事件监听器。

这样，您就为元素附加了一个语义属性，然后由您的脚本管理该属性。