Javascriptイベントプロキシの徹底分析_基礎知識

私は長い間、出来事の発生とその到来の間には何の違いもないと常々感じてきました。

最近、もう一度調べてみたら、違いはそれほど大きくないことがわかりました。あなたがそれをどのように理解しているか見てみましょう。

イベント エージェントとは何かを理解するには、まずエージェントとは何なのかを理解する必要があります。

ビジネスの観点から見ると、エージェントであるということは、次のことを意味します。私は商品を持っていますが、あなたは商品を持っていないが、私にはそれらをすべて販売する時間もエネルギーもありません。そして、あなたには自由時間がたくさんあります。時間しかない。それで、私はあなたにそれを買うのを手伝ってもらいます、そして、私はあなたに手数料を与えます。この過程で実際に商品が手に入ります。

OK、イベント エージェントという用語の意味を文字通りにはどう理解しますか?これについては後で詳しく説明します。

1 まず、初心者が onclik イベントをバインディングする実際の例を見てみましょう

以前の動作に従った場合、各 li タグに onlick を追加するにはどうすればよいでしょうか?ナンセンス、私だったら間違いなく単純で粗雑です。
各 li をループし、それらをすべて onlick でバインドします。

つまり、私のコードは次のようになります:

<ul id="thl">
  <li>001</li>
  <li>002</li>
  <li>003</li>
</ul>

<script>
  var thl= document.getElementById('thl');
  var aLi = thl.getElementsByTagName('li');
  for (var i = 0; i < aLi.length; i++) {
  　　aLi[i].onclick = fn;
  }
  
  function fn (){
   console.log("maomaoliang");
  }
</script>

すべて順調のようです。これはパフォーマンスを消費するという記事もありますが、私のコンピューターは良好であり、あなたのパフォーマンスは気にしていないので、あまり真剣に受け止めることはできません。

2 ある日突然、js 経由で追加された新しい li が onlcik

にバインドされていないことがわかりました。

var node=document.createElement("li");
var textnode=document.createTextNode("maomaoliang");
node.appendChild(textnode);
document.getElementById("ul1").appendChild(node);

その後、maomaoliang をクリックすると、onlick がバインドされません。これはなぜですか?
ああ、元の li と後で生成された li は同時に発生しなかったことがわかりました。新しい li 要素が作成される前に、イベントが既存の li に追加されました。わかりました、とても迷惑です。

3 どうやって壊すの？

そこで、いくつかの記事を読んだところ、イベントプロキシというものが使えることを知りました。試してみます！そこで、コードの一部を次のように書き直しました。

var thl= document.getElementById('thl');
thl.onclick = function(ev) {
  ev = ev || event;
  //兼容处理
  var target = ev.target || ev.srcElement;
　　//找到li元素
  if (target.nodeName.toLowerCase() == 'li') {
     fn();
   }
};

function fn (){
 console.log("maomaoliang");
}

その結果、新しい li をクリックすると fn 関数もトリガーされました。さて、好奇心に駆られた身としては、もっと詳しい説明を求めずにいられるでしょうか。もっと実践的になり、謎を理解する必要があります。

そこで、イベント業者の情報を見てみました。

まず、イベント バブリングとは何かを知る必要があります。たとえば、マウスがボタンをクリックするなど、要素上のイベントがトリガーされると、その要素のすべての祖先要素で同じイベントがトリガーされます。このプロセスはイベント バブリングと呼ばれます。

次に、前の質問に戻ります。「イベント エージェントという用語の意味を文字通りに理解するにはどうすればよいですか?」あるいは、その出来事は誰を代表しているのでしょうか？
この記事の例で、変更されたコードを見ると、onlick イベントを li タグではなく ul タグにバインドしています。したがって、任意の li タグ (動的に生成されたものであるか、以前から存在していたものであるかに関係なく) をクリックすると、このイベントはバブルのようにポップアップしてポップアップします。通常の状況では、ul も onclick にバインドされ、body も onclick にバインドされます。つまり、最もルートの要素にバインドされます。しかし、ここではonlickをulにバインドしているため、この時点でulがバブルをインターセプトし、イベントの上昇が停止し、ボディタグに到達できなくなります。

次に、 var target = ev.target || ev.srcElement; この文は、誰がクリックしたか、そして誰がターゲットかを伝えるのと同じです。このターゲットが li タグ if (target.nodeName.toLowerCase() == 'li') である場合は、fn 関数を実行します。

最後に、私はその質問に誇らしげに答えました。テーブルは onlick イベントを表しています。

4 イベントプロキシの手順を思い出してください

親要素バインディング イベント
親要素は、イベントの実際のターゲットが誰であるかを知っています
ターゲットを判断する必要があります。それが必要な要素である場合、コールバック関数が発生します (そのため、セレクターの使用方法を学ぶ必要があります)

5 最終まとめ、イベント会社の 2 つの大きなメリット

パフォーマンスが誤って最適化されました
動的に追加された要素はイベントにバインドすることもできます

注意すべき 6 つの点は

です。

上記は、jquery を使用する場合のネイティブ js イベント バインディング用です。そして、コードを次のように変更しました:

/*var thl= document.getElementById('ul1');
thl.onclick = function(ev) {
  ev = ev || event;
  //兼容处理
  var target = ev.target || ev.srcElement;
　　//找到li元素
  if (target.nodeName.toLowerCase() == 'li') {
     //li添加的事件
     fn();
   }
};*/

var node=document.createElement("li");
var textnode=document.createTextNode("maomaoliang");
node.appendChild(textnode);
document.getElementById("ul1").appendChild(node);

function fn (){
 console.log("maomaoliang");
}

$("#ul1").click(function(){
  fn();
});

このように、新しく追加した li タグも click に紐づけることができて、とても便利で簡単だと思いませんか？

あはは、そう考えるのが普通です。私も昔はそう思っていましたが、実際に何かを作ってみると、jquery だけでは十分ではないことがわかりました。でも基本的にはこれで十分です！

マスターは js を学ぶ必要があると言っていますが、私は最初に jquery を学び、その後 js を学ぶことができ、効果は良いと思います。