这个 jQuery 触发器有多贵？

发布于 2024-11-01 06:16:31 字数 388 浏览 1 评论 0原文

这个 jsFiddle 演示了我在说什么。本质上，我将一些元素绑定到自定义事件，然后使用

$('*').trigger('myevent', args)

我这样做来调用触发器，因为我将有一些元素绑定到此事件，但我还不知道它们是什么，我会希望尽可能地解耦这段代码。调用 $('*').trigger 是否昂贵得离谱，或者因为它只会触发绑定到该事件的元素而没有那么昂贵？

换句话说，这段代码是否会遍历页面上的每个元素以查看它是否附加到此事件，或者它是否知道哪些元素附加到该事件并只是触发它们？如果是前者，有更好的解决办法吗？

原文

This jsFiddle demonstrates what I'm talking about. Essentially, I'm binding some elements to a custom event and then calling a trigger using

$('*').trigger('myevent', args)

I'm doing this because I will have some elements bound to this event, but I don't know what they will be yet, and I'd like to decouple this code as much as possible. Is it ridiculously expensive to call $('*').trigger or not that expensive since it will only trigger the elements that are bound to that event?

In other words, does this code go through every element on the page to see if it is attached to this event, or does it know which ones are and just triggers them? If the former is the case, is there a better solution?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清醇 2024-11-08 06:16:31

更好的解决方案是绑定并触发文档中的事件，因为它只是一个 DOM 元素：

$(document).bind('myevent', function(e) {});

$(document).trigger('myevent');

现在，最终听起来更好的解决方案是使用事件委托：

$(document).delegate('.my-delegation-selector', 'myevent', function(e) {

});

看一下 < a href="http://api.jquery.com/delegate/" rel="nofollow">http://api.jquery.com/delegate/

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:red; }
  span { color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <p>Has an attached custom event.</p>
  <button>Trigger custom event</button>
  <span style="display:none;"></span>
<script>

    $("body").delegate("p", "myCustomEvent", function(e, myName, myValue){
      $(this).text("Hi there!");
      $("span").stop().css("opacity", 1)
               .text("myName = " + myName)
               .fadeIn(30).fadeOut(1000);
    });
    $("button").click(function () {
      $("p").trigger("myCustomEvent");
    });

</script>

</body>
</html>

The better solution is to bind and trigger events off of the document, since it will only be one DOM element:

$(document).bind('myevent', function(e) {});

$(document).trigger('myevent');

Now ultimately what sounds like an even better solution to your problem would be to use event delegation:

$(document).delegate('.my-delegation-selector', 'myevent', function(e) {

});

Take a look at this example from http://api.jquery.com/delegate/

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:red; }
  span { color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <p>Has an attached custom event.</p>
  <button>Trigger custom event</button>
  <span style="display:none;"></span>
<script>

    $("body").delegate("p", "myCustomEvent", function(e, myName, myValue){
      $(this).text("Hi there!");
      $("span").stop().css("opacity", 1)
               .text("myName = " + myName)
               .fadeIn(30).fadeOut(1000);
    });
    $("button").click(function () {
      $("p").trigger("myCustomEvent");
    });

</script>

</body>
</html>

回复收藏 0 原文

橘香 2024-11-08 06:16:31

你有没有想过pubsub？就像简单的事情一样。

(function() {
    var $obj = $(window);

    window.pub = function(ev, data) {
        $obj.trigger(ev, data);
    };

    window.sub = function(ev, f) {
        $obj.bind(ev, f);
    };
})();

或者删除 jQuery 依赖

(function() {
    var $obj = {},
        undefined;

    window.pub = function(ev, data) {
        if ($obj[ev] === undefined) {
            return false;
        }
        for (var i = 0, len = $obj[ev].length; i < len; i++) {
            $obj[ev][i](data);
        }
    };

    window.sub = function(ev, f) {
        if ($obj[ev] === undefined) {
            $obj[ev] = [];
        }
        $obj[ev].push(f);
    };
})();

amplify.subscribe 和 Backbone.Events 为此有特定的对象。您甚至可能会找到具有类似对象的其他库。甚至还有用于此目的的库 PubSub.js 。

示例：

$("table.sort th").click(function(e) {
    ...
    window.pub("click.sortHeader", e); 
});

...

$.fn.pagify = function(json) {
    var table = $(this);
    ...
    //enter code here

    window.sub("click.sortHeader", function() {
         // handle table sorting.

         // adjust table pagifying plugin accordingly.
    });
};

一般来说，pub 是trigger，sub 是bind。在这个特定的示例中，我们有两个独立的插件。他们不知道他们是否意见一致，或者根本不知道他们是否在交谈。但由于排序“破坏”了我们表上的分页插件，我们订阅了排序“事件”来修复我们的分页。

其他人可以想出一个更好的例子。它基本上只是一种消息传递方式，而不对消息提供者或接收者是否存在做出任何假设。

Have you thought of pubsub? Something as simple as.

(function() {
    var $obj = $(window);

    window.pub = function(ev, data) {
        $obj.trigger(ev, data);
    };

    window.sub = function(ev, f) {
        $obj.bind(ev, f);
    };
})();

or drop the jQuery dependency

(function() {
    var $obj = {},
        undefined;

    window.pub = function(ev, data) {
        if ($obj[ev] === undefined) {
            return false;
        }
        for (var i = 0, len = $obj[ev].length; i < len; i++) {
            $obj[ev][i](data);
        }
    };

    window.sub = function(ev, f) {
        if ($obj[ev] === undefined) {
            $obj[ev] = [];
        }
        $obj[ev].push(f);
    };
})();

Both amplify.subscribe and Backbone.Events have specific objects for this. You may even find other libraries with similar objects. There are even libraries PubSub.js for this.

Example:

$("table.sort th").click(function(e) {
    ...
    window.pub("click.sortHeader", e); 
});

...

$.fn.pagify = function(json) {
    var table = $(this);
    ...
    //enter code here

    window.sub("click.sortHeader", function() {
         // handle table sorting.

         // adjust table pagifying plugin accordingly.
    });
};

In general pub is trigger and sub is bind. In this particular example we have two independent plugins. They don't know whether they are on the same page or talking at all. But since the sorting "breaks" the paging plugin on our table we have a subscription on the sorting "event" to fix our paging.

Someone else can come up with a better example. It's basically just a way of message passing without making any assumptions about whether either the message giver or receiver exists.

回复收藏 0 原文

稚然 2024-11-08 06:16:31

查看jquery源代码。当您在 jQuery 上触发事件时，它会检查有效节点

    // don't do events on text and comment nodes
    if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 ) {
        return undefined;
    }

，然后检查实际 dom 对象上的有效处理程序，

    // Trigger the event, it is assumed that "handle" is a function
    var handle = jQuery._data( elem, "handle" );

    if ( handle ) {
        handle.apply( elem, data );
    }

我认为真正的问题是 $('*') 选择器的使用。尝试针对您的问题建议的另一种解决方案

Looking at jquery source code. When you trigger an event on jQuery it check for a valid node

    // don't do events on text and comment nodes
    if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 ) {
        return undefined;
    }

And later check for a valid handler on the actual dom object

    // Trigger the event, it is assumed that "handle" is a function
    var handle = jQuery._data( elem, "handle" );

    if ( handle ) {
        handle.apply( elem, data );
    }

I think that the real problem is the use of $('*') selector. Try another of the suggested solutions to your problem

回复收藏 0 原文

~没有更多了~