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则更喜欢事件委托）

Answer 1

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

如果您真的无法注册听众，请使用事件委派：

<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"新添加的按钮也会触发事件监听器。

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

Answer 2

<button onclick="javascript: click_me()"></button>

<script>
    function click_me() { }
</script>

Live preview

我可以将HTML元素绑定到js函数（而不是其他方式）吗？

2 个答案: