Hello I have a pretty basic question about events in JS.

Can I do something like:

var myobj = { };
document.getElementById("myid").onmousemove = function (e) {
  myobj.e = e;
}

...

// called from function which will occure after onmousemove guaranteed
document.getElementById("info").innerHTML = myobj.e.type;

I need this for my game. I want to save event data and dispatch it later in update function of my game loop.

Okay. Here is jsfiddle.

<p id="info"></p><canvas id="can" width="400px" height="400px" style="border: 2px solid red"></canvas>

var my = { };
document.getElementById("can").onclick = function(e, custom) {
    my.e = e;
}
document.getElementById("can").onmouseover = function(e, custom) {
    my.e = e;
}
document.getElementById("can").onmouseout = function(e, custom) {
    my.e = e;
}
document.getElementById("can").oncontextmenu = function(e, custom) {
    my.e = e;
}
document.getElementById("info").innerHTML = my.e.type;

/

And it doesnt work.

Hello I have a pretty basic question about events in JS.

Can I do something like:

var myobj = { };
document.getElementById("myid").onmousemove = function (e) {
  myobj.e = e;
}

...

// called from function which will occure after onmousemove guaranteed
document.getElementById("info").innerHTML = myobj.e.type;

I need this for my game. I want to save event data and dispatch it later in update function of my game loop.

Okay. Here is jsfiddle.

<p id="info"></p><canvas id="can" width="400px" height="400px" style="border: 2px solid red"></canvas>

var my = { };
document.getElementById("can").onclick = function(e, custom) {
    my.e = e;
}
document.getElementById("can").onmouseover = function(e, custom) {
    my.e = e;
}
document.getElementById("can").onmouseout = function(e, custom) {
    my.e = e;
}
document.getElementById("can").oncontextmenu = function(e, custom) {
    my.e = e;
}
document.getElementById("info").innerHTML = my.e.type;

http://jsfiddle/cMPSS/3/

And it doesnt work.

• javascript

• @KevinBoucher I know this resource. My problem is that I can't use the code above. I need someone to point out the errors in my code or how to solve what I need to acplish. – GuardianX Commented Oct 23, 2012 at 22:07
• What's the error you are getting? – Kevin Boucher Commented Oct 23, 2012 at 22:10
• 1 That's obvious; myobj.e is undefined when he uses it. – J. K. Commented Oct 23, 2012 at 22:11
• See my downvoted answer for a working example. – Jan Commented Oct 23, 2012 at 22:39

3 Answers 3

Yes, you could do something like this

var myEvents = [];
var myDiv = document.getElementById("myDiv");
var infoDiv = document.getElementById("info");

function logEvent(e)
{
    e.preventDefault(); // prevent default behaviour if needed
    myEvents.push(e); // Store event info
}

myDiv.onmousemove = myDiv.onmousedown = myDiv.onmouseup = logEvent; 

// Set a timer for looping through the events
gameTimer = setInterval(function() {
    // Loop through events
    while (myEvents.length>0)
    {
        ev = myEvents.shift();
        // Display event info
        infoDiv.innerHTML = ev.type + " " + infoDiv.innerHTML; 
    }
}, 100)​
​

DEMO

Ah ha, your edit made things a lot clearer. Here's what you should be using:

<p id="info"></p><canvas id="can" width="400px" height="400px" style="border: 2px solid red"></canvas>

var can = document.getElementById('can'), info = document.getElementById('info');
function eventHandler(e) {
    info.innerHTML = e.type;
}
can.onclick = can.onmouseover = can.onmouseout = can.oncontextmenu = eventHandler;

Basically, you're assigning myobj.e in the event handler, but use it outside of the event handler. myobj.e will be undefined until the event fires. What you want is simply to do all event-related functionality in the event callbacks.

You might want to learn a bit about asynchronous programming. Events fire asynchronously -- you don't know when the user will move the mouse.

The event is dispatched asynchronously when the factors leading to its dispatch occur. You need to update the DOM (HTML) in the event handler.

var myobj = {};

document.getElementById('myid').onmousemove = function (e) {
  document.getElementById('info').innerHTML = e.type;

  myobj.e = e; // not sure if you need this, not required for the update
};

Update:

I see that you listen to various events. To keep your code DRY (don't repeat yourself), create a function which updates the "info" element and use it as a handler for all the events.

var updateInfo = function (e) {
  document.getElementById('info').innerHTML = e.type;
};

var target = document.getElementById('can');
target.onmouseover = updateInfo;
target.onmousemove = updateInfo;
target.onmouseout = updateInfo;
// ...