反応イベントとネイティブイベントの違いは何ですか?-フロントエンドQ&A-php.cn

反応イベントとネイティブイベントの違いは、反応イベントはドキュメントにバインドされるのに対し、ネイティブイベントは dom にバインドされることです。バインディングに関しては、DOM 上のイベントがドキュメント上のイベントよりも優先されます。react のイベントオブジェクトはネイティブオブジェクトではなく合成オブジェクトです。

反応イベントとネイティブイベントの違いは何ですか?

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

反応イベントとネイティブイベントの違いは何ですか?

反応イベントはドキュメントにバインドされ、

ネイティブイベントは dom にバインドされます。

したがって、結合場所に関しては、DOM 上のイベントがドキュメント上のイベントよりも優先されます。

まず第一に、JS はいくつかの動的な操作を実装することになっており、ユーザーはフォームの送信やマウスクリックなどの機能を実装したい場合があるため、ブラウザーでこのイベントをトリガーする必要があります。、その後、ブラウザはユーザーの行動を感知 (またはキャプチャ) し、イベントに応答します。これをイベントと呼びます。

イベントオブジェクトとは何ですか?

システムはハンドラーを呼び出すと、イベントに関するすべての情報をオブジェクトにカプセル化し、それをパラメーターとしてイベントハンドラーに渡します。このオブジェクトがイベントオブジェクトです。ネイティブ関数ではイベントがよく見られますが、これはイベントオブジェクトと呼ばれるものです。

react には、イベント処理において次の利点があります:

パフォーマンスの最適化を達成するために、ほぼすべてのイベントがドキュメントに委任されます。

##イベントオブジェクト (event) は合成オブジェクト (SyntheticEvent) です。 )、ネイティブではありません

すべてのイベント処理関数が DOM にバインドされている場合、ページが応答するときに影響を受け、ページが非常に遅くなります。このような DOM イベントの悪用を回避し、最下層でのさまざまなブラウザイベント間のシステムの違いを保護するために、React は中間層 -SyntheticEvent

Principle

を実装します。 React では、イベントをバインドする必要がある場合、通常は次のように JSX で記述します:

我是react点击事件

ログイン後にコピー

しかし、React では、クリックイベントは実際には div の DOM にバインドされるのではなく、DOM にバインドされます。 div の DOCUMENT に設定すると、イベントが発生してドキュメントにバブルすると、反応はイベントの内容を対応する関数に渡して処理します。

反応ネイティブイベントでの使用方法

react はほぼすべてのネイティブイベントをカプセル化しますが、たとえば:

モーダルを開いた後、他の空白領域をクリックするとモーダルを閉じる必要があります

いくつかのサードパーティのイベントの紹介ネイティブイベントを実装するライブラリ、およびライブラリが相互に対話する必要がある場合、

および他のシナリオでは、ビジネスロジック処理にネイティブイベントを使用する必要があります。

ネイティブイベントは実際の DOM にバインドする必要があるため、通常、componentdidmout/ref 関数の実行フェーズ中にバインドされます。

class Demo extends Domponent { componentDidMount () { const parentDom = ReactDom.findDOMNode(this) const childDom = parentDom.queneSelector('.button'); childDom.addEventListen('click',this.onDomClick, false) } onDOMClick = (e) => { } render () { return demo
 } }

ログイン後にコピー

ネイティブイベントと合成イベントの混合使用

ビジネスシナリオでネイティブイベントと合成イベントを混合する必要がある場合は、使用中に支払いを行う必要があります。次の点に注意してください:

応答のシーケンス

class Demo extends Domponent { componentDidMount () { const parentDom = ReactDom.findDOMNode(this) const childDom = parentDom.queneSelector('.button'); childDom.addEventListen('click',this.onDomClick, false) } onDOMClick = (e) => { console.log('dom event!') } onReactClick = (e) => { console.log('react event!') } render () { return demo
 } }

ログイン後にコピー

結果出力: