JS 原型：避免事件处理程序多次绑定到同一个对象答案

【问题标题】：JS Prototype: Avoiding an event handler being bound several times to the same objectJS 原型：避免事件处理程序多次绑定到同一个对象
【发布时间】：2011-09-20 09:07:36
【问题描述】：

因此，对于新的 ajax 事物，我们必须在每次进行 ajax 调用时重新初始化我们的 Javascript 事件处理程序，因为 ajax 调用会导致整个页面重绘导致对象未初始化。

看看这个 jsfiddle： Javascript eventhandler added multiple times to the same object

这就是我所拥有的，它似乎可以工作，但由于它将与我们拥有的一切一起使用：我想确保它是正确的解决方案。例如。全局定义变量

    MyCompany.field.bindedOnfocusSelector = MyCompany.field._focusEventHandler.bindAsEventListener(MyCompany.field);

只是感觉不对劲。而且它缺乏处理更多函数参数的可能性。

正如另一位海报所建议的原型 $(smth).on(event) 我在让它工作时遇到问题 - 我记得跨浏览器的问题（例如，在 IE 8 上，在 Firefox 中工作的东西不起作用）甚至在这个更简单的例子中 jsFiddle problem with on('focus')：

【问题讨论】：

标签： javascript ajax prototypejs dom-events

【解决方案1】：

你如何注册一个ajax响应器，并在请求完成后添加方法

Ajax.Responders.register({
    onComplete: function(transport) {
        MyCompany.field._initTextInputFields();
    }
});

更新

好的，考虑到您的评论，如何观察整个页面，即body 并确定是否发生了输入事件，例如：

 $("#body").on("focus", "input[type=text]:not([readonly])", function(event, element) {
    // ....
 });

我认为这会对您有所帮助，因为您只需添加一个观察者，而无需删除它，您的所有逻辑都可以包含在内。

PS：注意Event.on 仅在原型 1.7 中可用

更新

好的，如果你只检查点击怎么办，虽然键盘现在不能工作，但我认为这是一个可行的解决方案

Updated Fiddle

【讨论】：

这种方法的问题在于，我得到了一个包含多个输入字段的部分、区域等的 ID 列表。我不知道调用之前存在哪些输入字段。所以基本上我最终会多次添加处理程序。在添加之前维护列表和删除观察者似乎比为所有字段再次添加它们更困难。表现？老实说，我不知道，也许对于具有很多字段的大页面，我也必须考虑到这一点。
我更新了我的问题，但它不起作用（至少在这个设置中是为了集中注意力）