`mousemove` and triggering a custom event

Question

In a mousemove event:

$(document).on('mousemove', function( e ){
    console.log( e.pageX );
    console.log( e.pageY );
});

as you can see, we can use pageX and pageY to get the x and y co-ordinates of mouse position. But, what I want is to trigger a custom event of mine on mousemove and would like to get these pageX and pageY values in that custom event of mine. To be more clear, what I would like to do is:

$(document).on('mousemove', function(){
    $(document).trigger('myevent');
});

$(document).on('myevent', function( e ){
    // console.log( e.pageX );
    // console.log( e.pageY );
});

Is there any way to access these pageX and pageY in myevent ?

Answer 1

.trigger() allows to pass additional data via its arguments. You can call

$(document).on('mousemove', function( event ){
    $(document).trigger('myevent', event);
});

Now you have access to the whole original event object within your custom event code.

Answer 2

Another option is to create a custom event like

 $(document).on('mousemove', function(e) { var event = $.Event('myevent', { pageX: e.pageX, pageY: e.pageY }); $(document).trigger(event); }); $(document).on('myevent', function(e) { log(e.pageX + ':' + e.pageY) }); var log = function(message) { var $log = $('#log'); $log.html(message) }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="log"></div>