Question

您好，我对JS中的事件有一个非常基本的问题。

我可以这样做：

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;

我的游戏需要这个。我想保存事件数据，稍后在游戏循环的更新功能中发送它。

好。这是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.net/cMPSS/3/

它不起作用。

Answer 1

啊哈，你的编辑让事情变得更加清晰。以下是您应该使用的内容：

<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;

基本上，您在事件处理程序中分配myobj.e，但在事件处理程序之外使用它。事件发生前，myobj.e将为undefined。你想要的只是在事件回调中做所有事件相关的功能。

您可能想了解一下异步编程。事件以异步方式触发 - 您不知道用户何时移动鼠标。

Answer 2

是的，你可以做这样的事情

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

Answer 3

当导致其调度的因素发生时，将异步调度该事件。您需要在事件处理程序中更新DOM（HTML）。

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

<强>更新

我看到你听各种事件。要保持代码DRY（不要重复自己），请创建一个更新“info”元素的函数，并将其用作所有事件的处理程序。

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

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

如何在JS中为变量赋值事件

3 个答案: