jQueryのイベントオブジェクトはネイティブイベントと何が違うのか

jQueryのクリックイベントで受け取る引数eは、ブラウザのEventと同じものに見えます。しかし実際には同じではありません。結論から言うと、jQueryのイベントオブジェクトはネイティブイベントそのものではなく、ネイティブイベントを包んだラッパー（jQuery.Event）です。

この違いを知らないと、「なぜかプロパティが存在しない」「ブラウザごとに挙動が違う」といった混乱が起きます。逆にここを理解すると、jQueryがなぜ当時爆発的に普及したのかも見えてきます。

まずブラウザの標準イベントです。addEventListenerで受け取るものがそれです。

document.getElementById('btn')
  .addEventListener('click', function(e){
    console.log(e instanceof Event); // true
  });

このeはブラウザが生成したEventオブジェクトです。問題は、かつてのブラウザはこれが統一されていませんでした。

つまり「クリックイベントを書く」だけで、ブラウザごとにコードを書き分ける必要がありました。

jQueryはこの差異を吸収するため、イベントを独自オブジェクトに変換しています。

$('#btn').on('click', function(e){
  console.log(e.constructor.name); // jQuery.Event
});

ここで受け取っているのはネイティブのEventではありません。jQuery.Eventです。

ただし中身が全く別物というわけではありません。内部にネイティブイベントが保持されています。

$('#btn').on('click', function(e){
  console.log(e.originalEvent);
});

originalEventが、ブラウザの本物のイベントです。jQueryはそれを加工して、常に同じインターフェースで使えるようにしています。

当時の最大の問題はプロパティの不統一でした。

jQueryはこれを統一しました。

$('#btn').on('click', function(e){
  console.log(e.target); // 常に同じ
});

つまりjQueryは新機能を提供したのではなく、ブラウザの違いを無かったことにするための層です。

ネイティブイベントでは次のように書きます。

e.preventDefault();
e.stopPropagation();

jQueryでも同じコードが使えます。これはjQuery.Eventが内部でoriginalEventを呼び出しているためです。もし古いブラウザでpreventDefaultが存在しない場合でも、jQueryが代替処理を行います。

つまりjQueryのイベントオブジェクトは「便利」なのではなく、互換性を保証するためのアダプターです。

普段はjQuery.Eventで十分ですが、例外があります。マウス座標や詳細なポインタイベントを扱う場合です。

$('#btn').on('click', function(e){
  console.log(e.pageX);
});

多くは問題ありませんが、ブラウザ固有の情報を扱うと値が期待と違う場合があります。そのときにoriginalEventを参照します。

e.originalEvent.clientX

ここで初めて「本物のイベント」を直接扱います。

理由は見た目が同じだからです。

つまりネイティブEventと区別できません。しかし内部は別物です。このため、ネイティブAPIのドキュメント通りに書いたコードが動かないケースが発生します。

特にaddEventListenerへそのまま渡すと問題が起きます。

次のようなコードです。

element.addEventListener('click', handler);
$('#btn').on('click', handler);

同じhandlerでも、受け取るイベントの型が変わります。

この違いが原因で、型チェックやinstanceofが失敗します。

jQueryのイベントオブジェクトは、DOMイベントを置き換えたものではありません。DOMイベントを安全に扱うための翻訳層です。

当時はこれが非常に重要でした。ブラウザごとの差異が大きく、イベント処理だけで大量の分岐が必要だったためです。

現在はブラウザが統一され、ラッパーの必要性は小さくなりました。しかし古いコードを読む場合や、イベントの挙動を理解する際には重要な知識です。

違いをまとめると次の通りです。

つまりjQueryのイベントは「別物」ではなく「加工済み」です。ここを理解していると、イベント周りの不具合の原因がかなり絞り込めるようになります。

jQueryはイベント処理を簡単にしたのではなく、壊れないようにしたライブラリだったと言えます。