JSイベントの委任について話す

イベントの委任について話す

イベントの委任:

イベントは、私たちが通常バインドするイベントです。
デリゲートは現在の要素にバインドされていませんが、親または祖先の要素にバインドされています。イベントイベントオブジェクトのtargetプロパティを介して、現在クリックされている正確な要素を取得できます。

原理:バブリングの原理が使用されます。

利点:

  1. forループを減らし、バインディングイベントの数を減らし、メモリリークの可能性を減らします。
  2. イベントを将来の要素にバインドできます。

デフォルトのイベントを防ぎ、伝播を防ぎます

デフォルトのイベントをブロックする:
メインストリーム:

  1. e.preventDefault()
  2. IE:e.returnValue = false;

拡散を止める:
主流:

  1. e.stopPropagation()
  2. IE:e.cancelBubble=true

offsetX clientX screenXpageXを個別に分析する

offsetX:イベントの場所からターゲット要素のエッジまでの距離。

clientX:イベントの場所からブラウザのビューポートの端までの距離。

screenX:イベントの場所からコンピューター画面の端までの距離。

pageX:イベントの場所からドキュメントの端までの距離(ie8は互換性がありません)。

手書きで[10,80]のランダムな小数を生成する

document.write(Math.random()*70 + 10 + '</br>');
// 1. 10 + 70 = 80,这是 10~80之间。两数相加一定要等于最大的那个要求的数,这里就是等于80。
// 2. 10 表示从 10 开始。

手書きで生成された[10,80]のランダムな整数

document.write(parseInt(Math.random()*70 + 10 + '</br>'));

7日後に現在の時刻を生成します

var date = new Date();
date.setDate(date.getDate()+7);
document.write(date);

一般的なH5ラベルとそれに対応する意味

  1. ヘッダー:ドキュメント(Webページまたは特定の段落)のヘッダー(ヘッド)を定義するために使用されます。
  2. フッター:フッタータグは、Webページまたはチャプターコンテンツの下部領域(フッター)を表します。
  3. 記事:表のドキュメント、ページ、またはプログラムで、外部から独立して完全に引用できるコンテンツ。
  4. nav:現在のドキュメントまたは他のドキュメントにナビゲーションリンクを提供することを示します。
    静的ナビゲーション:nav>a
    動的ナビゲーション:nav>ul>li>a
  5. セクション:セクションはhtmlの独立した領域です(主にWebページのセグメンテーション用)。他のセマンティクスはなく、通常は独立したタイトルが含まれています。
  6. 余談:サイドバー。ページの他の部分のコンテンツとはほとんど関係のない領域を表します。

おすすめ

転載: blog.csdn.net/weixin_47021982/article/details/113570376