JavaScriptのイベントオブジェクトって?
イベントリスナーやイベントハンドラーは、引数としてイベントオブジェクトを受け取ります。
DOMで発生したイベントは、イベントオブジェクトを使用して、プロパティー(情報)を取得したり、メソッドを使用して値を操作することができます。
例えば、keydownイベントのイベントオブジェクトはこんな感じ
eでkeydownイベントオブジェクトを受け取ったとすると、
e.typeで"keydown"というvalueを受け取れるということです。
具体的に何ができるの?
- typeプロパティ...イベントの種類は何か分かる(clike, mouseoverなど)
- targetプロパティ...イベント発生元の要素を取得できる
- clientX, clientY...イベントが発生した、ブラウザ上での座標を取得できる
- keyプロパティ...押下されたキーボードのキーの値を取得できる
などなど
イベントオブジェクトを取得するには?
イベントリスナーに引数を指定するだけです。
慣例的にe
やev
がよく使われます。
書き方例
document.getElementById('item').addEventListener('keydown', function(e) {
console.log('キーコードは' + e.keyCode + 'です'), false);
});
おまけ
クリックイベント等でリロードされてしまう時などは、イベントハンドラーでイベントオブジェクトを受け取って、preventDefault()をするとリロードされてしまうなどがなくなる
xxx.addEventListener('click', function(e) {
e.preventDefault();
}