【问题标题】:How to make live custom events in jQuery如何在 jQuery 中制作实时自定义事件
【发布时间】:2009-05-02 22:45:14
【问题描述】:

jQuery 有一个非常方便的名为 live() 的事件绑定器,它可以动态地将事件添加到 DOM 元素(即使是稍后将添加到 DOM 的元素)。问题是它只适用于特定事件 (listed here in documentation)。

我真的很想进行现场直播活动,以进行焦点、模糊和更改,而现在现场直播不支持这些活动。此外,如果我可以制作实时自定义事件,这将是我的应用程序的重大改变。我现在拥有的大部分代码都致力于将旧事件(更改、焦点和自定义事件以使项目可拖动或调整大小)重新绑定到通过 ajax 添加的新 dom 元素。

有什么想法吗?我想事件委托是要走的路,但我现在它会使代码更复杂。也许是一个处理事件委托的插件......不确定。帮我找到解决办法。

【问题讨论】:

    标签: javascript jquery event-handling live


    【解决方案1】:

    这个功能现在在 jQuery 1.4 中可用。 live() 现在支持所有 JavaScript 事件(包括自定义事件),并且 focusinfocusout 事件已作为 focusblur 的冒泡版本引入。

    来自jQuery 1.4 documentation on .live()

    从 jQuery 1.4 开始,.live() 方法支持自定义事件以及所有 JavaScript 事件。两个例外:因为 focus 和 blur 实际上并不是冒泡事件,所以我们需要使用 focusin 和 focusout 来代替。

    【讨论】:

      【解决方案2】:

      如果它不在 jQuery 中,那很可能是有原因的。浏览器错误等使其不可靠。我会等到他们实现它或尝试使用已上线的原始插件http://docs.jquery.com/Plugins/livequery

      编辑:

      不错的投反对票的家伙。它不在 jQuery 中是有原因的,我非常怀疑这是因为它们是 lazy。我实际上已经花时间阅读源代码并寻找为什么只有某些事件在 live() 中实现,但我找不到原因。所以如果有人知道...请赐教。

      【讨论】:

      【解决方案3】:

      jQuery 的 live() 方法不起作用,因为焦点和模糊事件不像其他 DOM 事件那样传播(冒泡)。 jQuery 团队最终会引入这个功能,但它必须是人工的(手动冒泡)。

      如果我不使用 jQuery 并且仍然想要 live() 的好处,我会在支持它的浏览器(大多数非 IE 浏览器)中使用事件捕获,在 IE 中我会使用他们的onFocusIn/onFocusOut 事件(这些事件与焦点/模糊不同,会冒泡)。

      这是一个例子:

      function onFocus(el, fn) {
          var outerFn = function(e) {
              e = e || window.event;
              if ((e.target || e.srcElement) === el) {
                  fn.call(el);
              }
          };
          if (document.body.addEventListener) {
              // This is event capturing:
              document.body.addEventListener('focus', outerFn, true);
          } else {
              // This is event delegation:
              document.body.attachEvent('onfocusin', outerFn);
          }
          return outerFn;
      }
      

      使用它:

      onFocus(document.getElementById('myInputField'), function(){
          log('FOCUSED!!!');
      });
      

      类似的抽象可以用于模糊和更改事件。

      在此处阅读有关事件顺序(捕获/冒泡)的更多信息:http://www.quirksmode.org/js/events_order.html


      同样值得注意的是,jQuery 插件 liveQuery 之所以有效,是因为它将事件重新绑定到新元素;它仅适用于 jQuery 的 DOM 操作方法,如“append”、“insertBefore”等。因此,如果您要在不使用 jQuery 的情况下添加新元素,它将无法正常工作。

      【讨论】:

      • 我刚刚在 Yahoo 上观看了 PPK 演讲,他在其中详细讨论了 javascript 事件,还提到了所有这些关于冒泡事件的问题以及它们在不同浏览器供应商中的差异。非常有价值......我强烈推荐它。 yuiblog.com/blog/2009/04/27/video-ppk-jsevents
      【解决方案4】:

      您可能想查看 Ariel Flesley 的 jQuery.Listen 插件。它类似于 live() 事件和 livequery() 插件,但它支持 focus() 和 blur() 事件。

      http://flesler.blogspot.com/2007/10/jquerylisten.html

      【讨论】:

        【解决方案5】:

        我已经成功地使用 livequery 插件作为 jQuery 中 .live() 函数的补充。它不仅可以绑定诸如焦点、模糊和更改之类的事件(从 1.3.2 开始,live() 还不支持),而且它还为您提供了一种将自定义事件动态绑定到 DOM 元素的机制。例如,我使用它将可拖动和可放置对象绑定到一些将通过 Ajax 添加的 DOM 元素。 它使我的代码更易于阅读和维护。

        【讨论】:

        • 你可能应该接受建议 livequery 的答案。
        猜你喜欢
        • 2014-07-02
        • 2013-03-14
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-12-06
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多