jsのイベントの代理と依頼

本論文ではJavaScript事件の代理または依頼の概念を説明します.まず直接定義します.イベント依頼はイベントの泡を利用して、一つのイベントハンドラを指定するだけで、あるタイプのすべてのイベントを管理することができます.上に来て定義を見て、少しぼんやりしているかもしれませんので、一番重要な解析部分に着きました.

  
1
  
2
  
3

私は今リストを持っています.各liの中の値をイジェクトしたいです.

var list = document.getElementById('list');
var liArr = list.getElementsByTagName('li');
for (var i = 0; i < liArr.length; i++) {
  liArr[i].addEventListener('click', function () {
    alert(this.innerHTML);
  });
}

このやり方はすでに希望の効果を実現しましたが、ある場面を考えてみます.

  
1
  
2
  
3
      ……
  
9999
  
10000
    

私は今10000個のliを持っていますが、サイクルを作って、各liにイベントを追加すると、まったく性能が消耗してしまいます.そこで、イベントの代理というか、依頼が登場しました.実は事件の泡が発生する原理を利用して実現したのです.要素をクリックします.このイベントは文書ツリーに沿ってdocumentまでアップロードされます.そして、イベントを追加したい要素の親にクリックして実行を依頼します.その後、その末裔の中のどの要素がトリガされたのかを判断して、該当関数を実行します.余計なことを言わないで、直接コードを入れてください.

document.getElementById('list').addEventListener('click', function (evt) {
  if (evt.target.tagName.toUpperCase() === 'LI') {
    alert(this.innerHTML);
  }
});

このように書いてコードを簡潔にして、しかも大量の循環がなくなって、メモリを節約して、言うことができるのは一挙両得です.このような親要素に依頼してイベントを実行し、その泡が発生する原理を利用してサブ要素の対応する関数を実行する方法を、イベントのエージェントといいます.またはイベントの依頼といいます.