How to create a custom event in jquery? [closed]

问题

How can I create a custom event in jquery? I want to create a selection draw event. so that I can replace the add note button on this plugin JQuery Image Annotation with my event. I want to be able to directly draw an annotation just like we draw a rectangular selection area, How can I do this? please guide.

I' already doing it but my problem is I don't know how to define my custom event which i'd like to call ondraw, i mean what i want to know is, how a basic jquery event is defined? Any skeleton or example would definitly help, and im a novice so i need a bit of guidance, also i found a piece of code to create rectangles, code:

     $(function(){
var $container = $('#container');
var $selection = $('<div>').addClass('selection-box');

$container.on('mousedown', function(e) {
    var click_y = e.pageY;
    var click_x = e.pageX;

    $selection.css({
      'top':    click_y,
      'left':   click_x,
      'width':  0,
      'height': 0
    });
    $selection.appendTo($container);
    $container.on('mousemove', function(e) {
        var move_x = e.pageX,
            move_y = e.pageY,
            width  = Math.abs(move_x - click_x),
            height = Math.abs(move_y - click_y);

        $selection.css({
            'width':  width,
            'height': height
        });
        if (move_x < click_x) { //mouse moving left instead of right
            $selection.css({
                'left': click_x - width
            });
        }
        if (move_y < click_y) { //mouse moving up instead of down
            $selection.css({
                'top': click_y - height
            });
        }
    }).on('mouseup', function(e) {
        $container.off('mousemove');
        $selection.remove();
    });
});

});

回答1:

Have a look at triggering and binding here. Trigger an event in your code

// Trigger event on selection draw
$(document).trigger('onSelectionDraw')

then bind to the event

$(document).bind('onSelectionDraw', function() {
    // do stuff
});

回答2:

Creating custom events in the jQuery object was never recommended to me as a suitable way of creating my own 'events'. Instead I was always pointed towards either:

Functions with a callback that are called at specific breakpoints in my scripts emulating events with my own code.
Create some generic event handlers and trigger the event using jQuery .trigger() method
If events already exist, unbind and rebind with your own event handler.

Callback function example

function myCustomEvent(callback)
{
    // Do something

    // If callback is a function call it
    typeof callback === 'function' && callback();
}

Much later on and in a galaxy far far away

// You have a function that loads JS asyncronously
// but want to know each time it is fired. asyncLoad()
// Also accepts a callback as a parameter
asyncLoad('/js/myJs.js', function()
{
    console.log('myJs asyncronously loaded');

    // Script is loaded, run our event
    myCustomEvent(function()
    {
        console.log('myJs event complete');
    });
});

In that example it would make more sense to fire your custom event within the asyncLoad() function but to show how it works I think this will do.

Your code :

When the plugin is called on a jQuery object an event is bound to that button. It would more than likely be a 'click' however it is worth looking through the source to find the actual event fired.

From a cursory look, unbinding and rebinding would seem to be the best action, assuming you can also find the id of the button it creates. (or have an easy way of selecting it as a jQuery object).

$('#createdButton').unbind('click')
    .click(function(e)
    {
        // New event handling code
    });

Note this method may not work if the plugin uses bubbling events with .on for example. In that case you would need to stopPropagation() for the element or parent within the original event handler. Alternatively unbind() on the low level DOM element that the event is bound to would also work.

来源：https://stackoverflow.com/questions/13207103/how-to-create-a-custom-event-in-jquery

标签

jquery

plugins

custom-event