1

こんにちは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/

そして、それは機能しません。

4

3 に答える 3

2

ああ、あなたの編集は物事をより明確にしました。使用する必要があるものは次のとおりです。

<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必要なのは、イベントコールバックですべてのイベント関連機能を実行することです。

非同期プログラミングについて少し学びたいと思うかもしれません。イベントは非同期で発生します。ユーザーがいつマウスを動かすかはわかりません。

于 2012-10-23T22:06:14.000 に答える
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)​
​

デモ

于 2012-10-23T22:11:44.920 に答える
0

イベントは、そのディスパッチにつながる要因が発生したときに非同期にディスパッチされます。イベントハンドラーで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;
// ...
于 2012-10-23T22:06:24.470 に答える