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

suzuki-navi 2023/07/16

前回のスクラップの続き

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

suzuki-navi 2023/07/16

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

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

デフォルトは全部false。

suzuki-navi 2023/07/16

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

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

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

https://domevents.dev/

suzuki-navi 2023/07/16に更新

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

suzuki-navi 2023/07/16

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

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

suzuki-navi 2023/07/16

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

suzuki-navi 2023/07/16

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

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

suzuki-navi 2023/07/16

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

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

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

suzuki-navi 2023/07/16

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

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

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

suzuki-navi 2023/07/16

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

suzuki-navi 2023/07/16

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

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

suzuki-navi 2023/07/16

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

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

suzuki-navi 2023/07/16

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

suzuki-navi 2023/07/16

ビューポート座標
- ウィンドウの左上を原点にした座標系
- スクロールすれば、要素のビューポート座標値が変化する
- 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 2023/07/16

topとleftプロパティの解釈

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

suzuki-navi 2023/07/16

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

suzuki-navi 2023/07/16

Elementにあるプロパティ

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

suzuki-navi 2023/07/16に更新

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 2023/07/16

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

suzuki-navi 2023/07/16

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

suzuki-navi 2023/07/16

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

suzuki-navi 2023/07/16

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

suzuki-navi 2023/07/16

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

suzuki-navi 2023/07/16

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

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