今日の章から始めて、KitJSのイベント管理のコンテンツを導入することに焦点を当て、主流のJSフレームワークが独自の独立したイベント管理機能を内部的に実装する方法を簡単な言語で公開しようとします。
(i)通常のDOMイベント
通常、サポートすることでHTMLでイベントを書くことができます
<onclick =” alert(1)”> test </a>
または、DOMオブジェクトを取得した後にバインドします
document.getElementById( 'a')。onclick = function(){alert(1)}
または二次イベント
document.getElementById( 'A')。AddEventListener( 'click'、function(){alert(1)}、flase)
またはスクリプトタグを介して
<スクリプト=” a” event =” onclick”> alert(1)</script>
W3C標準は、HTMLとJSの強い依存性を切り離す目的で、二次イベント方法である上記の3番目のバインディング方法を推奨しています。
(ii)質問
ただし、モード3のみを使用してJSプログラミングを直接実行する場合、次の問題に遭遇するため、十分ではありません。
1。ブラウザの互換性。 IEシリーズとW3Cでサポートされているブラウザのパラメーターは、第2レベルのイベントバインディングメソッド名とパラメーターで一貫していません。
2。レベル2のイベントをバインドした後、他のイベントが同じ要素にバインドされているかどうか、どのイベントがバインドされているか、イベントの内容は何ですか?
3。レベル2イベントの結合方法がトリガーされた後、順序はバインディングの前に順序ではなく、ランダムに実行されます。ただし、トリガーされたメソッドを注文する必要がある場合があります。
4.同じ要素のイベントがトリガーされた場合、W3Cの標準APIは、同じ要素にバインドされた他のイベントの停止と引き続きトリガーを継続することをサポートしない場合、W3Cは泡の停止をサポートします。
5.多くの場合、匿名関数メソッドを介してレベル2のイベントを登録します。イベント実行方法を登録するためのハンドルは残されていないため、removeEventListenerを介してイベントをキャンセルすることは困難です。
(iii)キットの問題を解決する方法
OK、上記の問題を解決するためにJSフレームワークが存在します。キットが上記の問題をどのように処理するかを見てみましょう。
Kit.js APIには、EV(config)メソッドがあります
この方法は、4つの重要なパラメーターを含むMAPタイプオブジェクトを受け入れます。
拘束する必要があるエル要素
文字列イベントタイプ
FNトリガー実行方法
このポインターを指定する必要があるかどうか、いなくても、登録時のELがこのポインターとして渡された場合、スコープを省略できます
(iv)コード分析
コードの実装をさらに見てみましょう
コア部分から直接開始します
着信パラメーターが空でない場合は、kitjs evregのイベント登録を保存するために、着信パラメーターELにオブジェクトが作成されます
Evregオブジェクトには2つの子オブジェクトがあります。1つはevregevと呼ばれ、登録イベントを保存します
Evregevオブジェクトでは、現在の登録イベントとしてキーを保存し、値は配列です。配列で、メソッドEVに渡された構成パラメーターを最初に並べてから到着します。これは配列であることに注意してください! ! !配列は順序を節約できるため、これは非常に重要です
Evregfnと呼ばれる匿名の方法もあり、イベントトリガーを保存します。
Evregfnは匿名のイベントであることがわかります。最初に、グローバル変数ウィンドウ[me.constants.kit_event_stopimmediatepropagation]が== trueかどうかを決定します。真実の場合、それは戻ってきて、実行を継続しません。
次に、見下ろすと、イベントによってトリガーされたEVオブジェクトを受け入れ、ターゲット、currentTarget、関連ターゲットなどのMergeifを使用して多くのオブジェクトをEVに添付して、ブラウザの互換性の問題を解決します。
StopNow、StopDefault、Stopgoonは、イベントが引き続きトリガーを継続しないように作成した方法です。
次の段落は、evregfnの鍵です。以前に作成されたEVREGEVのイベントアレイをループし、以前のEVメソッドで渡された構成パラメーターを順番に取り出し、構成パラメーターでメソッドを実行します。メソッドの返品値が空でない場合、返品値を返します。
最後に、ブラウザを互換性のあるものにし、レベル2イベント方法を使用してEVREGFN匿名メソッドをバインドします。
(v)要約
簡単に言えば、キットは独自の匿名メソッドを使用して、イベント登録ハンドルをキャッシュして配列を入力して、一連のイベントを覚えているだけでなく、以前に登録されたイベント、パラメーター、メソッドなどを見つけるためのエントリを提供し、同時にブラウザの互換性と互換性があります。
(vi)ログアウトイベント
キットがイベントのハンドルをキャッシュするのに役立つと、ログアウトが簡単になります
キットは、直接比較、またはfn.toString比較、およびfn.toString()。トリム()の比較を通じて対応するイベント構成を見つけ、配列から削除することがわかります。
(vii)イベント強化
キットがシステムイベントオブジェクトでMergeif操作を行っていることに今すぐ気づいたはずです。まず第一に、なぜMegerifをする必要があるのですか?システムイベントオブジェクトのオブジェクトプロパティは読み取られ、上書きできないため、持っていないプロパティのみを追加できます。
したがって、キットはMegerifだけです。私たちは皆、各ブラウザのイベントオブジェクトのイベントオブジェクトの非互換性があることを知っているため、キットはこれらの非互換性を修正する必要があります。たとえば、IEにはターゲット属性がなく、srcelementのみがあります。ターゲット属性を追加して、W3C標準の互換性を実現できます
もちろん、修理だけで私たちのニーズを満たすことができません。多くの場合、イベントオブジェクトに少し体重増加をする必要があります。
たとえば、iPhoneでタッチダウンとタッチモーブを開発する場合、シングルフィンガーオフセットを取得し、シングルフィンガーオフセットを取得する必要があります。Ev.targetTouches[0] .clientx、そのようなコードですが、匿名関数がこのようになると、PCでは互換性がありません。
何をするか?それは問題ではありません、私たちはイベントオブジェクトMergeifを自分の属性に与えることができます
firstfingerclientxなど。モバイルとPCによって開発された統合コードを簡単に実装できるようにします。
次の記事では、HTML5のドラッグアンドドロップについて説明し、高度なジェスチャーイベントはこれに基づいています。
これに加えて、なぜextjsのような新しいイベントではないのはなぜですか
1.システムネイティブオブジェクトには特定の相続関係があり、破壊されたくありません。
2。独自の新しいオブジェクトを使用する場合、コードはフレームワークから外れた後、輸送不可能である可能性があり、コードコンテンツを再度変更する必要があります。