Change the type of events

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 complete 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'........
$('can开发者_StackOverflowvas').bind('mouseleaveOnElement'........

and then assign something like

e.element = 'imageAtACertainPositionInTheCanvas'

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

---

• 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.)