我想使用jquery创建独立组件，这是附加事件的正确方式

I want to create stand alone component using jquery what is right way to attach events?

本文关键字：事件 方式 jquery 创建 组件 独立      更新时间：2023-09-26

我想创建独立组件意味着我有一些限制，不能使用jquery小部件库。我想知道在组件上绑定事件的正确方法是什么。例如，我想创建某种按钮组。如果我在应用程序中的任何地方使用该按钮组，它应该能够接受回调。如果我使用了这个组件，它应该可以工作。

HTML

<div id="btn-grp" data-callback="list of callback function here" data-value="selected button value" data-valid="false">
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn3">Button 3</button>
</div>

Javascript将是

$("body").on('click', '.btn-grp', function() {
  console.log("hey you clicked on button ....");
   forloop(){
      invoke callback 1 or 2 or so many
   }
});

一种方法是我可以为每个组件创建插件，你能分享一些创建组件的包装器函数吗。

好的-我会尝试一下，但我相信其他人会比我回答得更好。：//

我认为你试图如何这样做是不可能的。我认为你必须将每个按钮单独绑定到你希望它们做的事情上。问题是，在你给出的例子中，无论你在DIV上进行什么回调，只有DIV会受到影响，而你在按钮上进行的任何回调，只有按钮会受到影响。因此，DIV上的回调只有在您单击按钮所在的位置（如按钮周围的开放区域）时才会触发。

我相信有一种方法可以设置，这样当按下鼠标按钮时，它只会触发一个回调，然后你可以做一些处理来确定鼠标被点击的确切区域（比如按钮）。但这可能有些过头了。

我认为处理这一问题的更简单方法是对每个按钮进行回调，该按钮发送一个参数，说明按下了哪个按钮。如果您需要根据按钮的位置为每个按钮调用不同的函数，那么只需将函数名作为参数发送即可。然后使用调用该函数的间接方法。查看这个堆栈溢出问题以了解更多信息-或者谷歌如何在Javascript中进行间接调用：

JavaScript 中的间接函数调用

相关文章：