没有触发的自定义事件

Question

I have the following javascript function that I use to create a basic event handler for images being loaded in any given container...

function onImagesLoaded($container, callback) {
    var $images = $container.find("img");
    var imgCount = $images.length;
    if (!imgCount) {
        callback();
    } else {
        $images.each(function () {
            $(this).one("load error", function () {
                imgCount--;
                if (imgCount == 0) {
                    callback();
                }
            });
            if (this.complete) $(this).load();
        });
    }
}

I currently call that with something like this...

onImagesLoaded($("div.image-container"), function() {
    console.log("Images loaded");
});

This is fine and it works, but I want to be able to attach it to elements like this...

$("div.image-container").on("imagesloaded", function() {
    console.log("Images loaded");
});

This isn't a "my code doesn't work - please fix it" type of question, because it does work and does exactly what I want, functionality-wise. I'm asking this question as I can't find any help relating to how to do it the way I want to do it and I'm trying to learn something new. Everything I've read about jQuery custom events requires you to manually trigger them, and that's not what I'm trying to do here.

I'm saying that I want to attach an event handler to an element and then assign my function to that element because of that event handler. Maybe I need to parse the elements in the DOM manually to do this - I don't know.

Can anyone at least point me in the direction of how this can be done (if it can)?

Edit

I started working on overriding the existing on() function in a similar way to how KevinB suggested below. The code he supplied covered a couple of issues I had with my version so I merged the two together and came up with a working version....

var $_on = $.fn.on

$.fn.on = function () {
    switch (arguments[0]) {
        case "imagesloaded":
            onImagesLoaded(this, arguments[1]);
            break;
        default:
            return $_on.apply(this, arguments);
            break;
    }
};

Using that I can now attach custom event handlers using .on() , just as I said I wanted in the question above.

In hindsight, the question title was worded badly. It should have been about just that - overriding on() .

Another Edit

After further thought on the matter I decided to create a createEvent() method so I could add custom events to jQuery's on() without hassle. If anyone comes across this page and is looking for that, you can find it here...

http://johncmolyneux.blogspot.co.uk/2013/12/how-to-override-jquery-on-and-add.html

There's also a link on that page to the jquery.extend library on GitHub, which I will add to whenever I make something that I think should be added.

Answer 1

I would turn it into a plugin and use it this way:

$.loadImages = function($images, callback) {        
    var imgCount = $images.length;
    if (!imgCount) {
        callback();
    } else {
        $images.each(function () {
            /*$(this).one("load error", function () {
                imgCount--;
                if (imgCount == 0) {
                    callback();
                }
            });
            if (this.complete) $(this).load();*/
            var img = new Image();
            $(img).on("load error", function(){
                imgCount--;
                if (imgCount == 0) {
                    callback();
                }
            });
            img.src = this.src;
        });
    }
};
$.fn.loadImages = function (callback) {
    var $images = this.find("img").addBack().filter("img");
    var self = this;
    $.loadImages($images,function(){
        if ($.isFunction(callback)) {
            callback();
        }
        self.trigger("imagesLoaded");
    });
};

Now you can use it like this:

$.loadImages($("div.image-container").find("img"), function() {
    console.log("Images loaded");
});

or you can use it like this:

$("div.image-container").on("imagesLoaded",function(){
    console.log("Images loaded");
}).loadImages();

or even like this:

$("div.image-container").loadImages(function(){
    console.log("Images loaded");
});

this works too:

$("div.image-container img").loadImages(function(){
    console.log("Images loaded");
});

There is no way of making .on automatically cause the plugin to run without monkeypatching .on, which is usually a bad idea. It might look something like this:

var oldOn = $.fn.on

$.fn.on = function() {
    var ret = oldOn.apply(this,arguments);
    if (arguments[0] == "imagesloaded") {
        var self = this;
        onImagesLoaded(this,function(){
            self.trigger("imagesloaded");
        });
    }
    return ret;
};