1、addEventListenerをパラメータ
target.addEventListener（タイプ、リスナー[、オプション]）。
target.addEventListener（タイプ、リスナー[、useCaptureは]）。
target.addEventListener（タイプ、リスナー[、useCaptureは、wantsUntrusted]）。//のGecko / Mozillaののみ
- タイプは、イベント・モニターの文字列の種類を表します。
- リスナーコールバック関数
- オプションオプション
- キャプチャ：ブール、スプレッドは、イベントのキャプチャ段階のこのタイプでのEventTargetをトリガーするリスナーを表します。
- 一度：ブールは、リスナーが一度だけまで追加した後に呼び出されますを示しています。それが本当であるならば、それが呼び出された後、リスナーは自動的に削除します。
- パッシブ：ブールは、trueに設定すると、指示リスナー（）でpreventDefaultを呼び出すことはありません。リスナーは、まだこの関数を呼び出した場合、クライアントはそれを無視して、コンソールに警告がスローされます。
- useCaptureオプションのイベントバブリング（偽）またはイベントのキャプチャ（真の）ステージトリガーのコールバック関数。
図2は、パッシブスクロールの使用は、性能を向上しました
デフォルト値の仕様によると、受動的なオプションは常にfalseです。しかし、これは導入圧延プロセス中の性能が得られ、圧延加工しようとすると、ブラウザのメインスレッドを停止する特定のタッチイベント（および他の）イベントリスナーの処理の可能性を大幅に低減することができます。
デフォルトでは、一部のブラウザ（特にChromeとFirefoxは）touchstartとtouchmoveイベントに真のドキュメントレベルのノードウィンドウ、文書およびDocument.bodyに値を変更するには、パッシブオプションがあり、この問題を回避することです。これは、イベントリスナーを呼び出し、そのユーザーがスクロールがページを予防することができませんでしレンダリングされたときに防ぐことができます。
するvar elemは=のdocument.getElementById（ 'ELEM'）;
elem.addEventListener（ 'touchmove'、関数リスナー（）{/ *何かをする* /}、{パッシブ：真}）;
受動的なパラメータを追加した後、ページのスクロールをブロックしないtouchmoveイベントは（もマウスホイールイベントに適用されます）。
多くのページはこのように、携帯側などのイベントを触れtouchstart監視します。
document.addEventListener（ "touchstart"、機能（E）{
... //ブラウザがe.preventDefault（）がないことを知りません。
}）
イベントオブジェクトのtouchstart cancelableプロパティがtrueであるので、それは、そのデフォルトの動作が停止するのpreventDefault（）メソッドを介して監視することができ、そのデフォルトの動作は、それが何であるか、一般的には、現在のページをスクロールすることです（また、ページを拡大縮小することができますそれが防止され、デフォルトの動作の場合）、ページが静止していなければなりません。しかし、ブラウザリスナーを知ることはできませんが）（でpreventDefaultを呼び出します、リスナーがデフォルトの動作の実装の実施後に行くことは待つだけ行うことができ、そしてリスナーは時間のかかるを実行することで、いくつかのも明白ました、ページカトンを引き起こすことになります。ビデオはまた、リスナーが空の関数であっても、いくつかのカトンを持っていることを、すべての後に、空の関数は、時間のかかるを実行すると述べました。
ビデオはまた、ローリングイベントリスナーの80％は、ほとんどの場合、ブラウザは白とそうであることを意味し、デフォルトの動作を阻止するつもりはないと述べました。したがって、それはありません、ブラウザはそれは同時に二つのスレッドを実行することができ、リスナーが受動的であることを知っていると言うイベントの既定の動作ではないだろうことを示す「従順」の受動リスナーの誕生、受動的な手段、リスナーのJavaScriptコードと、ブラウザのデフォルトの動作。
下面是在 Chrome for Android 上滚动 cnn.com 页面的对比视频，右边在注册 touchstart 事件时添加了 {passive: true} 选项，左边没有，可以看到，右边的顺畅多了。