JavaScript-イベント

イベント

イベント: ドキュメントやブラウザウィンドウで発生する特定のインタラクションの瞬間です。ウェブアプリケーションでは、要素をクリックする、マウスを要素の上に移動させる、ポップアップウィンドウを閉じる、などが代表的なイベントです。

JavaScriptはイベント駆動型言語であり、JavaScriptとHTMLの相互作用はイベントを通じて実現されます。

イベントの3つの要素

イベントの3つの要素：イベント・ソース、イベント、イベント・ドライバ。

• Github
• イベント：jsはすでに定義されています。
• イベントドライバ：スタイルやhtmlの操作。DOMとしても知られています。

コードを書く手順は以下の通り：

• イベントソースを取得します：document.getElementById(「ボックス”); // AndroidのfindViewByIdに似ている。
• 結合イベント： イベントソースボックス.イベントonclick= function(){ イベントドライバ};
• イベントドライバーの書き込み：DOMに対する操作。

イベントソースの入手方法

イベントソースを取得する方法は、DOMノードフェッチです。

イベントソースを取得する一般的な方法は以下の通りです：

var div1 = document.getElementById("box1"); //方法1: idで単一のタグを取得する
var arr1 = document.getElementsByTagName("div"); //方法2：タグ名でタグ配列を取得する。
var arr2 = document.getElementsByClassName("nav"); //方法3：クラス名でタグ配列を取得する。
var d1 = document.querySelector(".d1") // モード4: 最初にマッチした要素オブジェクトを取得する。
var navs = document.querySelectorAll(".nav") // 方法5: マッチしたすべての要素オブジェクトを取得する。

イベントのバインド方法

ブラウザは、イベント関数が呼び出されると、デフォルトでイベントの詳細を含むイベントオブジェクトを渡します。

• 方法 1: 無名関数を直接バインドする

   <div id="box1" ></div>
   <script type="text/javascript">
   var div1 = document.getElementById("box1");
   //イベントをバインドする最初の方法
   div1.onclick = function () {
   alert("ポップアップコンテンツ");
   }
   </script>
  

• 方法2：関数を別々に定義してから

   <div id="box1" ></div>
   <script type="text/javascript">
   var div1 = document.getElementById("box1");
   //イベントをバインドする2つ目の方法
   div1.onclick = fn; //これはfnであり、fnは戻り値を意味しないことに注意。
   //個別に定義された関数
   function fn() {
   alert("ポップアップコンテンツ");
   }
   </script>
  

  fnは関数全体を表し、fn()は戻り値を表します。

• インラインバインディング

   <!--インラインバインディング>
   <div id="box1" onclick="fn()"></div>
   <script type="text/javascript">
   function fn() {
   alert("ポップアップコンテンツ");
   }
   </script>
  

  これは、このバインディングのコードがjsコードで書かれているのではなく、文字列として認識されているからです。

イベントドライバ

JSでタグのプロパティとスタイルを操作します。

• jsでプロパティの値を書くときは、引用符を使い、単位を忘れないでください。

onload

onloadイベントは、ページが読み込まれたときに発生します。

jsの読み込みはhtmlの読み込みと同期しています。そのため、要素の定義でその要素を使用すると、エラーが報告されやすくなります。この時、onloadイベントが便利で、onloadでコードの要素を使用すれば、このコードが最後の実行であることを確認できます。

推奨は、jsコンテンツを実行する前に、ページ全体のすべての要素をロードすることです。そのため、window.onloadはタグの定義でタグの使用を防ぐことができます。

addEventListener

addEventListener: イベント・リスナー。元のイベントが実行されると、次のバインドされたイベントも実行されます。removeEventListener: 削除します。

バインディング方式はカスケードしないので、チーム開発に適しています。

element.addEventListener("", function() {
}, false)

パラメータの説明：

• パラメータ1：イベント名
• パラメータ 1: イベント名
• パラメータ3：デフォルトfalseは、バブリングフェーズがトリガーされることを示し、trueはキャプチャフェーズがトリガーされることを示します。

バブリング：子要素から親要素へ、1レイヤー上へ

キャプチャ：親から子へ、1レイヤー下