JSの基礎-dom

JUDGMENT

• DOMレベルのイベント
• DOMイベントモデル
• DOMイベントフロー
• DOMイベントは、特定のプロセスをキャプチャ
• Eventオブジェクトのための一般的な用途
• カスタムイベント

DOM概要| MDN

DOM | MDN

DOM操作

DOMレベルのイベント

• DOM0
  • 定義されたイベントのXXXの種類
  • element.onclick =関数（E）{...}
• DOM2
  • addEventListenerをする方法
  • element.addEventListener（ 'クリック'、機能（E）{...}）
  • btn.removeEventListener（ 'クリック'、FUNC、偽）
  • btn.attachEvent（ "onclickの"、FUNC）。
  • btn.detachEvent（ "onclickの"、FUNC）。
• DOM3
  • これは、イベントタイプの多くを追加します
  • element.addEventListener（ 'keyUpイベント'、関数（E）{...}）
  • eventUtilは、カスタムオブジェクトである、にtextInputはDOM3レベルのイベントです

DOMイベントモデル

ボトムアップからバブリング、上から下にキャプチャします。
ターゲットに、キャプチャし、その後、バブリングするには

DOMイベントフロー

+ DOM標準を使用して、気泡捕捉。両方のイベントは、ウィンドウオブジェクトでなく、ウィンドウオブジェクトの終わりから始め、すべてのオブジェクトDOMの流れをトリガします。

DOM標準のイベントストリームは、次の3つのフェーズで構成されています。

• イベントキャプチャ段階
• ターゲット段階では
• イベントバブリングフェーズ

特定のプロセスのDOMイベントのキャプチャを説明

窓から - >ドキュメント - > HTML - >ボディ - > ... - >ターゲット要素

Eventオブジェクトの一般的なアプリケーション

• event.target
  • イベントをトリガした要素
• event.currentTarget
  • エレメント結合イベント
• event.preventDefault（）
  • デフォルトの動作を妨げます
  • event.cancelBubble（）は断念し、event.preventBubbleされています
• するevent.stopPropagation（）
  • キャプチャまたはバブル期の更なる拡大を防ぐのではなく、泡立ちを防ぎます
• event.stopImmediatePropagation（）
  • 他のバブリングからのイベントを防ぎ、同じイベントリスナーが呼び出されないようにします。

イベント代理店/手数料

親要素にイベントデリゲートは、イベントをトリガバブリング機構を使用して、イベントの標的結合要素を指し

利点：

• イベント登録は、メモリ使用量の多くを保存し、減少させることができます
• イベントが動的に追加されたサブエレメントに適用することができます

イベントがトリガしてはならないときただし、不適切な使用は、火災を引き起こす可能性があります

ulEl.addEventListener('click', function(e){
  var target = event.target || event.srcElement;
  if(target && target.nodeName.toUpperCase() === "LI"){
    console.log(target.innerHTML);
  }
}, false);

カスタムイベント

• イベント
• CustomEvent

CustomEventだけでなく、カスタムイベントのために使用することができ、あなたはまた、後ろにパラメータオブジェクトを行うことができます

var evt = new Event('myEvent');

someDom.addEventListener('myEvent', function() {
  //处理这个自定义事件
});

someDom.dispatchEvent(evt);

イベントメカニズムIEとFirefoxの違いは何ですか？どのように私はバブリング防ぐことができますか？

IEのみイベントバブリングは、イベントのキャプチャをサポートしていませんが、Firefoxはイベントのキャプチャとバブリング作品をサポートしています。

泡立ちを防ぎます：

• デフォルトのアクションをキャンセル
  • W3C法）（e.preventDefaultあります
  • IEはe.returnValue = falseを使用されています。
• falseを返します
  • デフォルトの動作を防止するための唯一のjavascriptのリターンはfalse
  • あなたは両方の停止とオブジェクト気泡のデフォルトの動作を妨げる場合はJQueryです。
• バブリングを停止
  • W3C法）（e.stopPropagationあります
  • IEはe.cancelBubble = trueを使用しています

[js] view plaincopy
function stopHandler(event)
  window.event 
  ? window.event.cancelBubble = true 
  : event.stopPropagation();
}

dom.getAttribute DOM要素（たpropName）とdom.propName違いとの接触は何ですか

• dom.getAttribute（）、汎用性が任意の文書で使用することができ、戻り素子は、ソースファイルの属性で提供され、DOM文書要素の属性を操作するための標準的な方法であります
• dom.propNameは、典型的には、ブラウザは、オブジェクトが対応する要素を生成解析し、HTML文書内の特定の特徴要素にアクセス（例えば、HTMLAnchorElementを生成するタグ）、これらのオブジェクトの結合特性は、属性該当する特性について得られた特定のルールの特性に応じて配置されますそして唯一のgetAttributeを使用してアクセスすることができます
• dom.getAttribute（）戻り値は、ソース・ファイルに設定された値であり、ストリングの種類またはNULL（一部の実装戻ります「」）
• dom.propName戻り値は、文字列、ブール値、オブジェクト、およびその他の不定になることがあります
• ほとんどのプロパティは、このようなID、タイトルやその他のプロパティとして1人の関係、他に影響を与える変更、ある属性
• いくつかのブール型プロパティ<input hidden/>のテストとremoveAttribute hasAttributeために設定が完了するか、対応するプロパティを設定する必要があります
• 同じように<a href="../index.html">link</a>、必要に変換することにより、完全なURLを取得する際に、href属性、プロパティに変換
• いくつかの属性やなど、一対一のプロパティではありません：フォームコントロールは、<input value="hello"/>プロパティの値が変更され、コントロールの現在の値であり、変更または設定、はdefaultValueに対応し、setAttributeメソッドは、プロパティ値の属性が値を変更しない変更します

JSのDOM CSSスタイルを取得

function getStyle(obj, attr){
  if(obj.currentStyle){
    return obj.currentStyle[attr];
  } else {
    return window.getComputedStyle(obj, false)[attr];
  }
}

JSマウスドラッグを達成

DOM操作 - 、追加、削除、移動、コピー、作成、およびノー​​ドを見つけるためにどのように？

新しいノードを作成します。

• createDocumentFragment（）// DOMフラグメントを作成します
• createElement（）//特定の要素を作成します
• createTextNode（）//テキストノードを作成します。

追加、削除、置き換え、挿入

• appendChild（）
• removeChild（）
• replaceChild（）
• insertBefore（）//既存の子ノードの前に新しい子ノードを挿入

求めます

• ラベル名によってgetElementsByTagNameの（）//
• getElementsByName（）//要素のName属性の値によって（IEフォールトトレランス能力、名前IDに等しい値を含む配列であろう）
  
• getElementByIdを（）// ID、一意性によって要素

InnerHTMLの差分documen.write

• document.writeをのみ、ページ全体を再描画
• innerHTMLプロパティは、ページの一部を再描画することができます

ウィンドウオブジェクトやドキュメントオブジェクト

窓

• ウィンドウオブジェクトは、現在のブラウザウィンドウを表すJavaScriptのトップレベルのオブジェクトです。
• 私たちが作成するすべてのオブジェクト、関数、変数はWindowオブジェクトのメンバーです。
• Windowオブジェクトのメソッドとプロパティは、グローバルに有効です。

資料

• Documentオブジェクトは、HTMLドキュメントの他のすべてのノード（要素ノード、テキストノード、属性ノード、コメントノード）へのルートです
• Documentオブジェクト我々は、スクリプトを使用してHTMLページ内のすべての要素にアクセスできるように、
• ドキュメントオブジェクトは、すなわちwindow.document Windowオブジェクトの一部であります

「クライアント領域座標」、「ページ座標」、「スクリーン座標」の区別は何ですか

• クライアント座標
  • 可視領域（clientX）および垂直座標（clientYプロパティ）でマウスポインタの水平座標
• ページ座標
  • ページレイアウト（pageX）および垂直座標の水平座標にマウスポインタ
• スクリーン座標
  • 水平物理画面（がscreenX）の座標及び垂直座標（screenYの）

フォーカス/ぼかしやとfocusIn /差異との関係focusout

1. フォーカス/ぼかしバブル、とfocusIn / focusoutバブリングしません
2. フォーカス/ぼかしの互換性、とfocusIn /ブラウザFireFoxのに加えてfocusoutホスティングイベントの使用のための優れた互換性を持って、elem.addEventListener（「フォーカス」、ハンドラ、true）を取り込むFirefoxでイベントを使用することを検討してください

マウスオーバー/マウスアウトとのMouseEnter / mouseleave違いとの関係

1. マウスオーバー/マウスアウトイベント、標準ですべてのブラウザがサポートし、MouseEnterイベント/ mouseleave IE5.5が導入されたユニークなイベントが後DOM3基準を採用しており、近代的なブラウザは、標準サポート
2. マウスオーバー/マウスアウトがされてバブリングイベントを、MouseEnterイベント/ mouseleaveはバブリングません。必要イベント複数の要素のうち、/にマウスを監視しながら、それが推奨されるマウスオーバー/マウスアウトホスティング、パフォーマンスを向上させます
3. 標準イベント・モデルは、要素/アウトにevent.target発生表し、vent.relatedTargetが要素として/除去対応し、要素のうち/にevent.srcElementで発生古いIEで表さevent.toElementは、除去対象要素を表すイベント。 fromElementが移動したときにソース要素を示します

IE W3Cのイベント処理とイベント処理が持っているの違いは何ですか？

バインディングのイベント

• W3C：targetEl.addEventListener（ 'クリック'、ハンドラ、偽）;
• IE：targetEl.attachEvent（ 'onclickの'、ハンドラ）;

イベントを削除します

• W3C：targetEl.removeEventListener（ 'クリック'、ハンドラ、偽）;
• IE：targetEl.detachEvent（イベントハンドラ）;

イベントオブジェクト

• W3Cます。var E = arguments.callee.caller.arguments [0]
• IE：window.event

イベントターゲット

• W3C：e.target
• IE：window.event.srcElement

デフォルトのイベントの動作を防ぎます

• W3C：e.preventDefault（）
• IE：window.event.returnValue = false」を

イベントの伝播を停止します

• W3C：e.stopPropagation（）
• IE：window.event.cancelBubble =真