「JavaScript 第7版」を読む（15章：ブラウザ上のJavaScript）

前回のスクラップの続き

11章から14章をスキップして、15章から読むことにする。

addEventListenerで指定できるオプション

document.addEventListener("click", handler, {
    capture: false,
    once: false,
    passive: false,
});

デフォルトは全部false。

suzuki-navi

capture: true はキャプチャリングハンドラを表す。falseにすると通常のバブリングハンドラになる。

対象となる要素にたどり着く前に上から伝搬するのがcapture、要素にたどり着いた後に上に伝搬するのがbubble。

キャプチャとバブルは以下のサイトがイメージしやすい。

https://domevents.dev/

suzuki-navi

once: true は一度呼び出されたらハンドラが自動で削除される。

suzuki-navi

passive: true は、ハンドラの中で preventDefault() を呼び出さないことを通知する。これはたぶんブラウザ側でのUIのスムーズな動きを実現するための最適化処理を妨げないようにするため。

ChromeとFirefoxでのtouchmoveとmousewheelイベントだけはデフォルトが passive: true らしい。

suzuki-navi

onclickのイベントハンドラがreturn falseするのは古い方法。その代わりに event.preventDefault() をハンドラの中で呼び出すのが標準的な方法。

suzuki-navi

event.stopPropagation() をキャプチャリング、バブリングどちらのフェーズで呼び出しても、その後のイベント伝搬を止めることができる。ただし同じオブジェクトに登録されているイベントハンドラは全部実行される。

event.stopImmediatePropagation は同じオブジェクトに登録されているイベントハンドラの実行も中止する。

suzuki-navi

document.querySelector は最初にセレクタにマッチする要素を返す。なければnullを返す。

document.querySelectorAll はすべての要素を NodeList という配列のようなオブジェクトで返す。反復可能だが配列ではない。配列にするには Array.from を使う。

document だけでなく Element にもこの2つのメソッドが定義されている。

suzuki-navi

element.closestは自身の要素とそこから親の階層をたどり、セレクタにマッチする自身または祖先要素を返す。

clickイベントハンドラの中から、クリックされたリンク要素を探すコード例

const linkElement = event.target.closest("a[href]");

suzuki-navi

document.getElementById, document.getElementsByName, document.getElementsByTagName, document.getElementsByClassName はいまは非推奨。

suzuki-navi

Nodeオブジェクトのプロパティ

parentNode
- 親ノード
children
- 子要素のNodeList
childNodes
- Textノードを含めたすべての子ノードの NodeList
firstChild
lastChild
nextSibling
previousSibling
nodeName
- タグ名（全部大文字に変換される）

suzuki-navi

HTML要素の挿入には以下のメソッドを使える。文字列を文字列で渡すと自動でTextノードにしてくれる。

element.append
element.prepend
element.before
element.after

suzuki-navi

window.getComputedStyleは、スタイルシートのルールからブラウザが算出したスタイルのプロパティ値のセットを取得できる。

suzuki-navi

ビューポート座標
- ウィンドウの左上を原点にした座標系
- スクロールすれば、要素のビューポート座標値が変化する
- element.getBoundingClientRectやelement.getClientRectで取得できる座標値
- マウスイベントのclientXやclientYもこの座標値
ドキュメント座標
- ドキュメントの左上を原点にした座標系
- 物理的な紙のドキュメントなら意味があるが、HTMLドキュメントではあまり意味がない
  - overflowプロパティを使えば、スクロール可能な要素の中の座標がスクロールによって変わってしまうため

element.getBoundingClientRect は折り返しで2行にまたがるインライン要素に対して使うと、2行全体を含む領域を返す。element.getClientRects であれば2つの要素を持つ配列のようなオブジェクトを返し、折り返しがあれば2つの領域を2つの要素で返す。

document.elementFromPoint はビューポートの座標値から、その場所にあるElementオブジェクトを返す。要素が重なっていれば、最も内側で最前（z-indexが最大）の要素を返す。

window.scrollTo はドキュメント座標でスクロール位置を指定する。

element.scrollIntoView は座標値を指定せずに、要素がビューポート内に表示されるように自動でスクロールしてくれる。

suzuki-navi

topとleftプロパティの解釈

position: fixed
- ビューポート座標値
position: relative
- positionプロパティがなかった場合に配置される場所からの相対座標
position: absolute
- その要素を含む最近傍のコンテナからの相対座標

suzuki-navi

window.devicePixelRatio
- ソフトウェアピクセル1pxが実際のデバイスの何ピクセルに対応するか
- 整数とは限らない

suzuki-navi

Elementにあるプロパティ

offsetグループ
- offsetWidth
- offsetHeight
- offsetLeft
- offsetTop
- offsetParent
- borderとpaddingを含む領域
clientグループ
- clientWidth
- clientHeight
- clientLeft
- clientTop
- paddingを含む
scrollグループ
- scrollWidth
- scrollHeight
- scrollLeft
- scrollTop
- paddingのほかに、コンテンツ領域をはみ出しているコンテンツを足した領域

suzuki-navi

Web Componentsのサンプルを書いてみた。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>sample</title>
<script type="module">
customElements.define("sample-test", class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: "open"});
    this.shadowRoot.innerHTML = `
      <style>
        p {
          color: red;
        }
      </style>
      <p>shadow dom</p>
    `;
    this.shadowRoot.querySelector("p").textContent = this.textContent;
  }
});
</script>
</head>
<body>
<p>
  あいうえお
  <sample-test>かきくけこ</sample-test>
  さしすせそ
</p>
</body>
</html>

ブラウザで開くとこう見える。

ブラウザの開発者ツールからDOMを見るとこうなっている。

suzuki-navi

windowにhashchangeというイベントがある。URLのhashプロパティが変化すると呼び出される。（popstateしか知らなかった・・・）

suzuki-navi

XMLHttpRequestではなくfetch()を使う。

suzuki-navi

element.requestFullScreen() はフルスクリーンモードでの表示をリクエスト。動画などで使われる。

suzuki-navi

window.requestAnimationFrame() はアニメーションをスムーズに描画するために使う。

suzuki-navi

ネットの接続や切断の際にはWindowオブジェクトにonlineまたはofflineイベントが発生する。

suzuki-navi

タブ切り替えなどで表示非表示が変わったときにDocumentにvisibilitychangeイベントが発生する。

このスクラップは2023/07/16にクローズされました