Jquery懒惰地“触发”调用处理

Question

我有一段使用 JQuery 的代码，用于侦听 DOM 元素上的初始化事件。

var $button = $("#myButton")
$button.on("init", function () {
	console.log("Hello")
})
$button.trigger("init")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="myButton">Hello</div>

请注意我如何首先注册事件侦听器，然后调用 trigger 函数。

现在，我希望无论何时调用触发器，我的事件侦听器

函数都可以调用，即，如果在我注册事件侦听器之前调用触发器，有点像侦听事件流。

此代码不起作用：

var $button = $("#myButton")
$button.trigger("init")
$button.on("init", function () {
	console.log("Hello")
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="myButton">Hello</div>

是否有我不知道的JQuery具体的解决方案？

Answer 1

好的

，就像评论中提到的，你不能也不应该在创建列表器之前触发事件。

但是这是我整理的一个快速黑客解决方案(因为为什么不̄\_(ツ)_/̄呢(

工作示例：https://jsfiddle.net/9mj86r5e/

添加以下代码并将$button.trigger("init")替换为$button._trigger("init")

/**
 * Create a callable trigger alternative
 * @param   {String}    name
 * @param   {Mixed}     ...params       Addition paramaters to send with event
 */
$.fn._trigger = function(name, ...params) {
    var $el = this;
        // Keep looping every 100ms until the event listner is found
    $el.myEventFinder = setInterval(function() {
        // Get an object of attached event listeners
        var events = $._data($el.get(0), 'events');
        // Has the event been found?
        if (events[name]) {
                // Stop the eventFinder loop
            clearInterval($el.myEventFinder);
            // Trigger event
            $el.trigger(name, ...params);
        }
    }, 100);
};

P.s请不要使用此代码。仅仅因为它是可行的，并不意味着它应该被做。