requirejs在代码中设置事件

requirejs setting up events in code

本文关键字：设置 事件 代码 requirejs      更新时间：2023-09-26

我们开始使用typescript，因为它很容易编译成模块，所以我们也从requirejs开始。有没有一种方法可以直接在html中绑定事件？像

<a href="#" onclick="foo.bar();">
    <img src="foo.png" alt="foo">
</a>

将其动态设置为通常没有问题

$("foo.selector").click((e) => {
    this.bar(); 
    e.preventDefault();
});

但我们碰巧有2-3页，其中有多达数百（千）个表行和多达10个不同的事件/行。仅仅设置事件就需要0.5秒（看起来可能不多，但加上其他页面部分和其他东西，这需要很多）。我已经试着把它移到"按需"设置，所有线路都有mouseover => setup all the events，但效果不太好。我没有任何优化的想法了，只有一个，将evnet绑定移动到html中，并在代码呈现后准备好它们。不管怎样，require块的内部似乎被屏蔽了，不受这种行为的影响。

有没有一种方法可以在html中使用它？

通常认为使用像onclick这样的事件处理属性是非常糟糕的主意，人们正试图摆脱这种方法。

如果您需要动态处理单击，并且不希望（或不能）将事件侦听器直接分配给元素，请考虑使用事件委派。有点像

$(document).on('click', "foo.selector", function(event) {
   event.preventDefault();
   console.log("You clicked:", this);
});

基本上，在这种情况下，您在document对象上定义了一个事件侦听器，不管页面上有多少指定类型的项（如果有的话）。它还将自动处理在定义侦听器之后添加到页面中的任何新元素。

相关文章：