Is it possible to change the type of an event in JavaScript?

in this scenario I am triggering events with jQuery on a canvas, but on specific elements in rendered this canvas, like drawn shapes or images.

mousemoveevent ---> [canvas] -> [find element] ---> mousemoveoverelementevent

Basically I catch the onmousemove event over the plete canvas with:

$('canvas').bind('mousemove'........

but the DOM does not exist within the canvas so I want it to transform (to chatch up later in the process) to:

$('canvas').bind('mousemoveOverElement'........
$('canvas').bind('mouseenterOnElement'........
$('canvas').bind('mouseleaveOnElement'........

and then assign something like

e.element = 'imageAtACertainPositionInTheCanvas'

I prefer to pass the modified event instead of assigning a new callback.

Is it possible to change the type of an event in JavaScript?

in this scenario I am triggering events with jQuery on a canvas, but on specific elements in rendered this canvas, like drawn shapes or images.

mousemoveevent ---> [canvas] -> [find element] ---> mousemoveoverelementevent

Basically I catch the onmousemove event over the plete canvas with:

$('canvas').bind('mousemove'........

but the DOM does not exist within the canvas so I want it to transform (to chatch up later in the process) to:

$('canvas').bind('mousemoveOverElement'........
$('canvas').bind('mouseenterOnElement'........
$('canvas').bind('mouseleaveOnElement'........

and then assign something like

e.element = 'imageAtACertainPositionInTheCanvas'

I prefer to pass the modified event instead of assigning a new callback.

• javascript
• jquery
• html
• canvas

• 2 If you need your drawn elements to trigger events, is there a specific reason you're using canvas for this rather than SVG? – robertc Commented Jan 25, 2011 at 22:49
• 1 @robertc, yeah, it is mostly pixel-operations I am doing with the "elements". Almost none is vector. – Caspar Kleijne Commented Jan 25, 2011 at 23:01
• 1 Instead of attempting to mutate the event name, why not simply create and fire a new event of the type you wish. – Phrogz Commented Jan 26, 2011 at 6:14
• @Phrogz, with respect to the "anonymous" behaviour of passing the events and patibility with jQuery, I prefer to pass the same event object with some altered fields instead of a full new one. That would prevent the caller from receiving unexpected or missing data or formats. – Caspar Kleijne Commented Jan 26, 2011 at 8:45
• Can't you create a custom event and simply copy all the other properties into it? – David Tang Commented Feb 1, 2011 at 23:12

4 Answers 4

• CanvasScript3 offers a library with certain features such as events. There are a few things for MouseOver event, MouseOut event. Check the list of tests.
• There are also examples of associating events to Canvas "elements" in previous stackoverflow questions.
• HTML5 Canvas Rectangular Region Mouseover Tutorial

You might want to read the issue of Sprite and Canvas and their relative bad performances too.

I didn't understand what you said, maybe you could be more specific.

I know that you can change the type of a custom event.

// Custom mouse events
var myEvent = document.createEvent ("MouseEvents");

// Click
myEvent.initMouseEvent ("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

// Dispatch
link.dispatchEvent (myEvent);

// Changed the type
myEvent.initMouseEvent ("mousemove", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

// Dispatch
link.dispatchEvent (myEvent);

Anyway this links can help you:

DOM Level 3 Events

nsIDOMWindowUtils

[Example]

var img = new Image();
img.src = "...";
var $img = $(img);

$img.mousemove(function(_, e){
  console.log(e.pageX);                    
});

$('canvas').mousemove(function(e){
  if (mouse_over_image(e.pageX, e.pageY)) {
    e.target = img;
    $img.trigger("mousemove", e);
  }
});

I believe the answer you are seeking for is 'jQuery custom event'. jQuery custom event provides you abilities to name and organize your event handlers; these event handlers can then be triggered by $(el).trigger('the_event'). Just google for the word for usage and example.

I don't it could overwrite the event object, like e.element you suggested though. You may need to rethink the flow to fit it.

(Not the that this answer worth 200 reputation but here it is anyway, hope that it's helpful for you to find a way.)