Question

需要能够任意创建事件（甚至是在运行时创建的事件），然后将这些事件的事件侦听器任意绑定到元素。

在下面的代码中，所有内容完全按计划工作，但永远不会调用XBS.pullCurtain()（但事件会触发！）。我检查并重新检查了论据，序列等等 - 没有错误被抛出，一切似乎都是我所期待的。但事件听众没有酱油。：S

 // this func is used in the larger object below
function eCustom(eName, eProperties) {
            var defaultProps = {"bubbles":true, "cancelable":false, "eventPhase":0, "type":eName};
            if (typeof(eProperties) == "object") {
                for (var prop in eProperties) {
                    if (eProperties.hasOwnProperty(prop) ) {
                        defaultProps[prop] = eProperties[prop];
                    }
                }
            }
            return jQuery.Event(eName, defaultProps);
}

window.XBS = {
        cfg: {
            minLoadTime: 1000
        },
        evnt: {
            wakeFromSleep: eCustom("wakeFromSleep"),
            assetsLoaded: eCustom("assetsLoaded")
        },
        init: {
            // obviously will be expanded haha
            XBS.initImages();
        },
        stopwatch: {
            __sw: new Date(),
            reset:function() { XBS.stopwatch.startTime = -1},
            start: function() {
                var now = XBS.stopwatch.__sw.getTime();
                XBS.stopwatch.startTime = now;
                return now;
            },
            read: function() { return XBS.stopwatch.__sw.getTime() - XBS.stopwatch.start;},
            now: function() { return XBS.stopwatch.__sw.getTime();},
            elapsed: function(period) {
                var diff = XBS.stopwatch.now() - XBS.stopwatch.startTime;
                return (period !== undefined) ? diff > period : diff;
            },
            startTime:-1
        },
        sleep: function(period, wakeEvent, onWake, target) {
            if (wakeEvent == undefined) wakeEvent = XBS.evnt.wakeFromSleep;
            if (isFunction(onWake) ) {
                // confirmed code reaches these lines and all vars are as expected
                if (target == undefined) target = window;
                $(target).on(wakeEvent, onWake);
            }
            setTimeout(function() {$(target).trigger(wakeEvent) }, period);
        },
        initImages: function() {
            XBS.stopwatch.start();
            // loadImages is a jQuery extension (link at bottom), but it works like a charm—
            // problem isn't there, I'm 99% sure
            $("#image-loading-queue").loadImages({
                allLoadedClb:function() {
                    var success = null;
                //minLoadTime because there will be presentational animations
                    if (XBS.stopwatch.elapsed(XBS.cfg.minLoadTime)) {
                        success = true;
                    } else {
                        var elapsed = XBS.cfg.minLoadTime - XBS.stopwatch.elapsed();
                        XBS.sleep(elapsed, XBS.evnt.wakeFromSleep, XBS.pullCurtain, "#curtain");
                    }
                }
            });
            // this return is a placeholder for pending functionality, which is why it's not used
            return success;
        },
        pullCurtain: function() {
            // this will get more elaborate, but for now, I just want to call the darn thing!
            $("#curtain").fadeToggle();
        }
    }

借阅图书馆： http://www.jqueryscript.net/loading/Asynchronous-Image-Loading-with-jQuery-Image-Loader-Plugin.html

Answer 1

jsFiddle demo

您的jQuery on方法调用中有错误（您的JavaScript控制台可能正在抱怨）。 on的第一个参数应该只是要处理的事件的名称（字符串），而不是jQuery Event对象。看一下文档。它有两个签名：一个采用方法名称（例如'click'），另一个采用多个方法名称的映射到函数（例如{'click': fn1, 'mouseover': fn2}）。它没有jQuery Event对象的方法签名。

绑定处理程序时，请更改该行以仅传递事件名称：

$(target).on(wakeEvent.type, onWake);

jQuery：具有动态绑定，任意创建的事件的事件序列＆amp;听众没有完成

1 个答案: