You are viewing Jcrop 2.x documentation — click here for legacy v0.9.x

Events and Handlers

Most interactions with Jcrop can be accomplished without use of the API. By understanding and properly attaching event listeners, your application can react to Jcrop events and deeper integrations can be realized.

Selection Events

Event NameIssued when...Additional Argument(s)
cropcreateSelection is initializedselection
cropstartSelection action beginsselection, coords
cropmoveSelection changes (dragging)selection, coords
cropendSelection drag endsselection, coords
cropfocusSelection gains focusselection
cropblurSelection is blurredselection
cropremoveSelection is removedselection

Instance Events

Event NameIssued when...Additional Argument(s)
cropinitinstance initializedinstance
cropconfigsetOptions() called on instanceinstance, options

Event Bubbling

Events are fired either on selections or on the instance container. Either way, they bubble up through the container. Since the container may not be the object you attached to, it's important to associate any event handlers you intend for this Jcrop instance specifically to its container. The API returns the container, which can be used to conveniently set an event listener.

var container = $('#target').Jcrop('api').container;

container.on('cropmove',function(e,s,c){
  doSomethingWithSelectionAndCoords(s,c);
};

Specific Selection Events

Selection-specific events are fired on the selection element itself.
To trap these events on a specific selection, attach the handler to the selection as below.

var jcrop_api = $('#target').Jcrop('api');

jcrop_api.ui.selection.element.on('cropmove',function(e,s,c){
  doSomethingWithCoords(c);
});

Of course, these events bubble up through the container and can be trapped there. If you do this and are looking for a specific selection it can be compared to the second argument passed to the event handler as the following code demonstrates.

var jcrop_api = $('#target').Jcrop('api'),
    container = jcrop_api.container,
    myselection = jcrop_api.ui.multi[1];

container.on('cropmove',function(e,s,c){
  if (s === myselection) {
    //...
  }
};

Remember, when comparing two objects to see if they are the same object, the strict equality operator (===) must be used.