Change the type of events

Question

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'........
$('canvas').bind('mouseleaveOnElement'........

and then assign something like

e.element = 'imageAtACertainPositionInTheCanvas'

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

If you need your drawn elements to trigger events, is there a specific reason you're using canvas for this rather than SVG? — robertc, Jan 25 '11 at 22:49
@robertc, yeah, it is mostly pixel-operations I am doing with the "elements". Almost none is vector. — Caspar Kleijne, Jan 25 '11 at 23:01
Instead of attempting to mutate the event name, why not simply create and fire a new event of the type you wish. — Phrogz, Jan 26 '11 at 06:14
@Phrogz, with respect to the "anonymous" behaviour of passing the events and compatibility 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, Jan 26 '11 at 08:45
Can't you create a custom event and simply copy all the other properties into it? — David Tang, Feb 01 '11 at 23:12
"I prefer to pass the modified event instead of assigning a new callback" Do you mean assigning a new event? It is a different event. I would just use what timdream suggested, fire your own events. If you think about it, the click event is just an abstraction of a mousedown and a mouseup, but it's a separate event. What you want is an abstraction of the the mousemove event, it's specialized for what you've drawn on the screen. The event properties would be different, there are no nodes in the canvas. — Ruan Mendes, Feb 03 '11 at 00:12
you want to create mouseover similar events for the canvas which fired when you mouseover a drawn object on the canvas? — Gergely Fehérvári, Feb 03 '11 at 14:43

score 2 · Answer 1 · answered Jan 30 '11 at 12:23

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

gblazex · Answer 2 · 2011-02-02T12:14:50.787

2

[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);
  }
});

edited Feb 02 '11 at 12:14

answered Feb 02 '11 at 11:47

gblazex

49,155
12
98
91

@Caspar - The example has been updated since then. Please check again. (I left the ... btw that's why there was no image) – gblazex Feb 02 '11 at 17:27
I do not think this is what I am looking for. $img has no role whatsoever here, if the image has a different offeset in the canvas than (0,0).... Now the canvas.mousover is passed straight to the $img mousover in a **new** event-trigger. – Caspar Kleijne Feb 03 '11 at 08:02

score 2 · Accepted Answer · edited May 23 '17 at 11:55

2

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.

edited May 23 '17 at 11:55

Community

1
1

answered Feb 03 '11 at 22:13

karlcow

6,977
4
38
72

+1 & answer for pointing me the right direction. Thanks for the great links ;) **All answers** here were **very useful**, however this one provides me the biggest resource of information. – Caspar Kleijne Feb 04 '11 at 08:00

score 1 · Answer 4 · answered Jan 28 '11 at 08:43

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

Change the type of events

4 Answers4