More than 5 years have passed since last update.

jQuery Event から DOM Event を取る

Posted at 2016-11-23

結論

event.originalEventで取れる。

jQueryのイベント便利ですよね。
一気に複数イベント登録できたり.onceや名前空間など様々な機能があって便利です。

しかし、ドラッグアンドドロップイベントのdataTransferや、コピーアンドペーストのclipboardDataなどはjQueryのeventでは直接使えません。

例

$("#editor").on("paste", function(event){
  alert(event.clipboardData.getData("text/plain") + "をペーストするよ！");
});
// => エラー！！

このとき関数に渡される引数はjQueryの独自のイベントオブジェクトなのです。
ブラウザ間で差異がないようよしなにやってくれてるわけですが、addEventListenerなどで渡されるオリジナルのイベントオブジェクトが欲しいです。

実は、このオリジナルのイベントオブジェクトは、jQueryのイベントオブジェクトのoriginalEventプロパティで参照できるようになっています。

なので、上記のコードは、

例

$("#editor").on("paste", function(event){
  alert(event.originalEvent.clipboardData.getData("text/plain") + "をペーストするよ！");
});

のように直すと動きます。