JavaScript におけるイベント委譲メカニズムと深いコピーと浅いコピーの簡単な分析

//方法 1: onclick 経由
<button onclick="clickEvent()">クリック</button>

<スクリプト>
関数 clickEvent(){
   alert("クリックイベント");
}
</スクリプト>

//方法 2: addEventListener 経由
<button id="btn_button">クリック</button>

<スクリプト>
var btn = document.getElementById("btn_button");
btn.addEventListener("クリック", 関数() {
  アラート("クリック");
}、 間違い）;
</スクリプト>

[関数メソッド1() {
  console.log("メソッド1");
}
関数メソッド2() {
  console.log("メソッド2");
}
関数メソッド3() {
  console.log("メソッド3");
}
var btn = document.getElementById("btn_button");
btn.addEventListener("click", method1, false); // 3 番目のパラメータはデフォルト値で、デフォルトではバブリングです。true に設定すると、キャプチャされます。btn.addEventListener("click", method2, false);
btn.addEventListener("click", method3, false);
// 最終的に、method1 -> method2 -> method3 の順に実行されます。 
btn.removeEventListener("click", method1, false); // イベントを削除するために使用されます btn.onclick = method1;
btn.onclick = メソッド2;
btn.onclick = メソッド3;
//最後にmethod3のみが実行されます
btn.onclick = null; // イベントを削除するために使用

<ul id="コンテナ" スタイル="display: インラインブロック;">
  <li id="title1">123456</li>
  <li id="title2">クワート</li>
  <li id="title3">
    <ul>
      <li id="title3inner">title3 内のテキスト</li>
    </ul>
  </li>
</ul>

<スクリプト>
  var コンテナ = document.getElementById("コンテナ");
  var title1 = document.getElementById("title1");
  var title2 = document.getElementById("title2");
  var title3 = document.getElementById("title3");
  var title3inner = document.getElementById("title3inner");

  コンテナ.onclick = 関数 (e) {
    アラート("コンテナ");
  }
  title1.onclick = 関数(e) {
    アラート("title1");
  }
  title2.onclick = 関数(e) {
    アラート("title2");
  }
  title3.onclick = 関数 (e) {
    アラート("title3");
  }
  title3inner.onclick = 関数 (e) {
    アラート("title3inner");
  }
</スクリプト>

<ul id="コンテナ" スタイル="display: インラインブロック;">
  <li id="title1">123456</li>
  <li id="title2">クワート</li>
  <li id="title3">QWE123</li>
</ul>

<スクリプト>
var コンテナ = document.getElementById("コンテナ");
コンテナ.onclick = 関数 (e) {
  //コンソールログ(e);
  (e.target.id = "title1") の場合 {
    アラート(e.target.innerText);
  }
  そうでない場合 (e.target.id = "title2") {
    アラート(e.target.innerText);
  }
  そうでない場合 (e.target.id = "title3") {
    アラート(e.target.innerText);
  }
}
</スクリプト>

a = 3 とします。
b = a とします。
a = 4;
コンソールログ(a); //4
コンソールログ(b); //3
console.log(a === b); //これはディープコピーです。a と b は完全に異なる変数であり、それぞれに値が格納されます。

arr = [1, 2, 3, 4, 5]とします。
brr = arr とします。
ar[1] = 8;
コンソール.log(arr[1]); //8
console.log(brr[1]); //8 なぜ? これは浅いコピーです。配列型は参照型です。arr 変数と brr 変数は参照アドレスのみを格納します。これらは一緒に配列 [1,2,3,4,5] を指します。console.log(arr === brr); //true

arr = [1, 2, 3, 4, 5]とします。
brr = JSON.parse(JSON.stringify(arr)) とします。
ar[1] = 8;
console.log(brr[1]); //2、これはいわゆるディープコピーを実装する