私はJavascriptイベント処理を少しずつ理解していますが、イベント処理が実際にどのように実装されたかなど、その背後にある完全な履歴を理解したいと思いました(のようにマークアップ内で使用している可能性があります<a onClick="callFunc()">
)
そして、後でJS(控えめなJS)から呼び出すようなものに更新された方法
jQueryを使用して現在どのように実装されているか?
各段階でのメリットや、イベントのバブリング/キャプチャなどを理解したかっただけです。
私はJavascriptイベント処理を少しずつ理解していますが、イベント処理が実際にどのように実装されたかなど、その背後にある完全な履歴を理解したいと思いました(のようにマークアップ内で使用している可能性があります<a onClick="callFunc()">
)
そして、後でJS(控えめなJS)から呼び出すようなものに更新された方法
jQueryを使用して現在どのように実装されているか?
各段階でのメリットや、イベントのバブリング/キャプチャなどを理解したかっただけです。
まあ、それはあまりありません。または、実際には、それにあったことはずっと前に起こった。
.addEventListener
CSSが持っている限りずっと存在しています。それがDOM-Level2が私たちと一緒にいた期間です(〜13年だと思います)。
それは、JSがどのように進歩したかという問題ではなく、JSライターがどのように進歩しなかったかという問題でした。
私が知っているプログラマーは、JSを「二次」または「三次」の役割として記述していますが、それでもインラインハンドラーを使用しています。それが特に良い考えだったので、10年以上が経ちました。
「邪魔にならない」ということに関しては、それは必ずしもイベントリスナーに直接関係しているわけではありません。
それは、何らかの方法でユーザーと対話するつもりであるが、関心の分離の問題である場合です。これは、のような要素のスタイルを設定しなくなったのと同じ方法<p><font color=red>red text</font></p>
です。
おそらく、DOM-0イベントハンドラー(のようなbutton.onclick = function () {}
)が長い間ぶらぶらしていて、まだ非常に頻繁に使用されている理由の一部は、MicrosoftattachEvent
とW3Cの間の戦争のためですaddEventListener
。
IE6-8でクロスブラウザーイベントをサポートする場合は、jQuery(または別のライブラリ)を使用するか、イベント管理関数を手動で作成して.attachEvent
、IEと.addEventListener
他のすべてのユーザーの両方をサポートするか、またはイベントプロパティを直接再使用します(.onclick = function () {}
)。これらには、現在使用されているほぼすべてのブラウザでサポートされているという利点があります。
それらには、割り当て可能な関数が1つしかないという欠点があります(さらに関数を追加する必要がある場合は、処理が醜くなります)。
(function () {
var button = document.getElementById("button"),
old_func = button.onclick;
button.onclick = function (e) {
e = e || window.event;
doStuff();
if (old_func) { old_func(); }
}
}());
...ここで、8人の異なるプログラマーが同じボタンにリスナーを追加することを想像してみてください。
バブリングとキャプチャについては...
これは実際には戦いではありませんでした(Netscape後)。
Microsoftはバブルをサポートし、W3Cは両方をサポートします。イベントが実際に発生する前、およびターゲットがイベントが発生していることを知る前に、イベントについて知りたいことがほとんどないため、実際にキャプチャを使用する人は誰もいません(キャプチャを使用する唯一の方法は、addEventListenerを使用することでした。つまり、あなたのイベントはIEでは機能しません...)
jQueryがテーブルにもたらしたのは、「新しい」イベントや「より良い」イベントではありませんでした。つまり、クロスブラウザーイベントをすべての人がプログラムできるようになりました。多くのAJAXライブラリは、これを主な目標として持っていました。との間の違い(jQueryの前に解決された問題でした)ととの間の違い(jQueryの前に解決されました)を正規
化することです。addEventListener
attachEvent
XMLHttpRequest
ActiveXObject("MSXML2.XMLHTTP.6.0")
jQueryは群衆のお気に入りであり、Resigはそれを使っていくつかの良いことをしました(jQueryユーザーはそれを使っていくつかの恐ろしいことをしましたが、Resigとその友人はばかげた証拠のDOMトラバーサルとイベント委任に超人間的である必要がありますおよび残り)。
ダグラス・クロックフォードやニコラス・ザカスのような人々が社会的領域の統治を取り、プロのハイな本について良い本や素晴らしい講演を書いたので、私たちの何人かは過去6年間でイベントの委任などで良くなりました。パフォーマンスJS。
そして、過去数年にわたって、より多くの人々が、企業での使用を見る他の言語で見られるデザインパターンに足を踏み入れました。
約束/延期/将来($.Deferred
/ $.when
)のようなものは、Webアプリのクライアント側の非同期プログラミングについて話すときのJSエンジニアリングの未来です。
今日のように100%見えるとは限りませんが、DOMイベントをまっすぐに保つことは解決された問題であり、いつでも発生する可能性のあるすべての非同期のものと一致させることです。ページ上の任意のウィジェットで
......そこでPromisesが役に立ちます。
次に、モジュール間の通信を安全に分離して維持するためのモデレーター/オブザーバーがあります。
これらは「カスタムイベント」の場合もあれば、「送信者」の場合もあります......または「発行者/サブスクライバー」の場合もあります。
あなたが聞いて行動できるもの。
それらは実際のブラウザイベントによってトリガーされる場合もあれば、コードでトリガーされる場合もあります。
繰り返しになりますが、jQueryはこれを発明したり完成させたりしませんでしたが、jQueryでサブスクライブするイベントは、内部でこれらのいずれかを実行しています。
同じ$.ajax
です-それは実際にはDOMイベントを使用しておらず、サブスクライブできるPromiseを渡します。使用するDOMイベントは、サーバーから実際にデータを取得するためのものだけです。その後、それはすべてカスタムです。
ここ数年で、JSで何ができるか、相互作用と非同期性をどのように処理するかという点で、大きな飛躍を遂げました。
addEventListener
そのほとんどは、どのように改善されたか、またはjQueryがIE8と他のブラウザーの間のギャップを埋めるのにどのように役立ったかの進歩とは何の関係もありませんでした。
私の理解によると1.HTMLとのJavascriptの相互作用は、イベントで処理されます。これは、ブラウザウィンドウまたはドキュメントで特定の瞬間がいつ発生するかを示します。これらのイベントは、リスナーが処理できます。2.イベントバブリングによると、-eventは、イベントが発生した位置から開始され、ドキュメントレベルまで上方向に流れます。すなわち-div-body-html-document。例:1。ここで、イベントリスナー関数には、eventというローカルのデフォルトオブジェクトがあります。これは、発生したイベントのタイプを示します。2.ここでは、これはイベントターゲット要素を示しています。
event.preventDefault()メソッドは、要素のデフォルトアクションの発生を停止します。
分類されたイベントグループ:ユーザーインタラクションイベント/フォーカスイベント/マウスイベント/ホイールイベント/テキストイベント/キーボードイベント。これらのイベントは、モバイルデバイスによって異なります。