CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
Caspar Kleijne
Caspar Kleijne

Reputation: 21864

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

and then assign something like 

e.element = 'imageAtACertainPositionInTheCanvas'

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

Upvotes: 4

Views: 2060

Answers (4)

karlcow
karlcow

Reputation: 6972

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

Upvotes: 2

gblazex
gblazex

Reputation: 50109

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

Upvotes: 2

Caio
Caio

Reputation: 3215

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

Upvotes: 2

timdream
timdream

Reputation: 5922

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

Upvotes: 1

Related Questions