Javascript 如何在JS中将事件分配给变量

您好，我有一个关于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;

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

好的。这是JSFIDLE

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

var my={}；
document.getElementById（“can”）.onclick=函数（e，自定义）{
my.e=e；
}
document.getElementById（“can”）.onmouseover=函数（e，自定义）{
my.e=e；
}
document.getElementById（“can”）.onmouseout=函数（e，自定义）{
my.e=e；
}
document.getElementById（“can”）.oncontextmenu=函数（e，自定义）{
my.e=e；
}
document.getElementById（“info”）.innerHTML=my.e.type；

---

而且它不起作用。

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

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

var can=document.getElementById（'can'），info=document.getElementById（'info'）；
函数eventHandler（e）{
info.innerHTML=e.type；
}
can.onclick=can.onmouseover=can.onmouseout=can.oncontextmenu=eventHandler；

基本上，您在事件处理程序中分配

myobj.e

，但在事件处理程序之外使用它<代码>myobj.e将

未定义

，直到事件触发。您只需要在事件回调中执行所有与事件相关的功能

---

您可能想了解一点异步编程。事件是异步触发的——你不知道用户何时会移动鼠标。

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

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

var can=document.getElementById（'can'），info=document.getElementById（'info'）；
函数eventHandler（e）{
info.innerHTML=e.type；
}
can.onclick=can.onmouseover=can.onmouseout=can.oncontextmenu=eventHandler；

基本上，您在事件处理程序中分配

myobj.e

，但在事件处理程序之外使用它<代码>myobj.e将

未定义

，直到事件触发。您只需要在事件回调中执行所有与事件相关的功能

---

您可能想了解一点异步编程。事件异步触发——您不知道用户何时移动鼠标。

当导致事件调度的因素发生时，事件将异步调度。您需要在事件处理程序中更新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
};

更新：

我看到你听到了各种各样的事件。为了使代码保持干燥（不要重复自己的代码），创建一个更新“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;
// ...

---

当导致事件分派的因素发生时，事件被异步分派。您需要在事件处理程序中更新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
};

更新：

我看到你听到了各种各样的事件。为了使代码保持干燥（不要重复自己的代码），创建一个更新“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;
// ...

---

是的，你可以这样做

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

---

是的，你可以这样做

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

---

---

@KevinBoucher我知道这个资源。我的问题是我不能使用上面的代码。我需要有人指出我的代码中的错误，或者如何解决我需要完成的任务

myobj.e

在他使用它时未定义。请参阅我被否决的答案中的一个工作示例。@KevinBoucher我知道这个资源。我的问题是我不能使用上面的代码。我需要有人指出我的代码中的错误，或者如何解决我需要完成的任务

myobj.e

在他使用它时未定义。请参阅我被否决的答案以获得一个有效的示例。请查看我的代码。我使用不同的元素，而不是单个元素。我使用第二个元素只是为了说明我需要什么样的功能——将事件分配给变量，并能够稍后在其他函数中分派它。我已经更新了代码。一开始我没有注意到不同的元素ID。请看我的代码。我使用不同的元素，而不是单个元素。我使用第二个元素只是为了说明我需要什么样的功能——将事件分配给变量，并能够稍后在其他函数中分派它。我已经更新了代码。一开始我没有注意到不同的元素ID。可能是因为它没有真正回答问题。它在什么方面没有回答问题？看起来有点混乱，但我认为这是我真正想要实现的。JFTR，我不是下选者，但最初这并没有解释为什么

myobj.e

未定义或如何修复它，或者到底发生了什么。然而现在，这实际上是最好的答案。LOL可能是因为它没有真正回答问题。它以什么方式回答问题？看起来有点混乱，但我认为这是我真正想要实现的。JFTR，我不是投票人，但最初这并没有解释为什么

myobj.e

没有定义，或者如何修复，或者到底发生了什么。然而现在，这实际上是最好的答案。LOLYep我知道异步意味着什么，但我的问题是我已经知道如果用户移动鼠标-我只需要在函数中分派事件的数据（例如事件类型、光标坐标等-我只是不想为这些字段创建新变量，而是直接使用事件对象），稍后将调用该函数。这有可能吗？我想，但它会变得毛茸茸的。更简单的方法是从事件处理程序内部调用函数。如果需要延迟，请使用

setTimeout

和闭包。@GuardianX是通过

setInterval

或类似方式定期调用的“稍后调用的函数”？确切地说。。。这是游戏循环中的函数更新，每隔几毫秒调用一次。@GuardianX Ooh。那会变得一团糟。可能使用FIFO队列。当事件激发时，将事件对象推入队列。在更新函数中，处理q