diff --git a/files/ja/web/api/event/composed/index.md b/files/ja/web/api/event/composed/index.md index 977829de0ce134..ce6d6f73dbbec8 100644 --- a/files/ja/web/api/event/composed/index.md +++ b/files/ja/web/api/event/composed/index.md @@ -1,6 +1,9 @@ --- -title: Event.composed +title: "Event: composed プロパティ" +short-title: composed slug: Web/API/Event/composed +l10n: + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- {{APIRef("Shadow DOM")}} @@ -24,38 +27,40 @@ UA から送られるすべての UI イベントは合成されます（クリ 2 つの定義は次のようになります。 ```js -customElements.define('open-shadow', +customElements.define( + "open-shadow", class extends HTMLElement { constructor() { super(); - const pElem = document.createElement('p'); - pElem.textContent = this.getAttribute('text'); + const pElem = document.createElement("p"); + pElem.textContent = this.getAttribute("text"); const shadowRoot = this.attachShadow({ - mode: 'open' + mode: "open", }); shadowRoot.appendChild(pElem); } - } + }, ); -customElements.define('closed-shadow', +customElements.define( + "closed-shadow", class extends HTMLElement { constructor() { super(); - const pElem = document.createElement('p'); - pElem.textContent = this.getAttribute('text'); + const pElem = document.createElement("p"); + pElem.textContent = this.getAttribute("text"); const shadowRoot = this.attachShadow({ - mode: 'closed' + mode: "closed", }); shadowRoot.appendChild(pElem); } - } + }, ); ``` @@ -69,7 +74,7 @@ customElements.define('closed-shadow', それから click イベントリスナーを `` 要素に設定します。 ```js -document.querySelector('html').addEventListener('click', function(e) { +document.querySelector("html").addEventListener("click", (e) => { console.log(e.composed); console.log(e.composedPath()); }); diff --git a/files/ja/web/api/event/composedpath/index.md b/files/ja/web/api/event/composedpath/index.md index 54d78a21b31d60..6d2b7bd11351dd 100644 --- a/files/ja/web/api/event/composedpath/index.md +++ b/files/ja/web/api/event/composedpath/index.md @@ -1,6 +1,9 @@ --- -title: Event.composedPath() +title: "Event: composedPath() メソッド" +short-title: composedPath() slug: Web/API/Event/composedPath +l10n: + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- {{APIRef("Shadow DOM")}} @@ -9,8 +12,8 @@ slug: Web/API/Event/composedPath ## 構文 -```js -var composed = Event.composedPath(); +```js-nolint +const composed = Event.composedPath() ``` ### 引数 @@ -23,35 +26,37 @@ var composed = Event.composedPath(); ## 例 -次の例は、 [https://mdn.github.io/web-components-examples/composed-composed-path/](https://mdn.github.io/web-components-examples/composed-composed-path/) を試すもので、 `` と `` という 2 つの些細なカスタム要素を定義しています。どちらも text 属性の内容を `

` 要素のテキストコンテンツとして、要素のシャドウ DOM に挿入します。両者の唯一の違いは、シャドウルートがそれぞれ `open` と `closed` に設定された状態で取り付けられることです。 +次の例は、 [https://mdn.github.io/web-components-examples/composed-composed-path/](https://mdn.github.io/web-components-examples/composed-composed-path/) を試すもので、`` と `` という 2 つの些細なカスタム要素を定義しています。どちらも text 属性の内容を `

` 要素のテキストコンテンツとして、要素のシャドウ DOM に挿入します。両者の唯一の違いは、シャドウルートがそれぞれ `open` と `closed` に設定された状態で取り付けられることです。 ```js -customElements.define('open-shadow', +customElements.define( + "open-shadow", class extends HTMLElement { constructor() { super(); - const pElem = document.createElement('p'); - pElem.textContent = this.getAttribute('text'); + const pElem = document.createElement("p"); + pElem.textContent = this.getAttribute("text"); - const shadowRoot = this.attachShadow({mode: 'open'}); + const shadowRoot = this.attachShadow({ mode: "open" }); shadowRoot.appendChild(pElem); } - } + }, ); -customElements.define('closed-shadow', +customElements.define( + "closed-shadow", class extends HTMLElement { constructor() { super(); - const pElem = document.createElement('p'); - pElem.textContent = this.getAttribute('text'); + const pElem = document.createElement("p"); + pElem.textContent = this.getAttribute("text"); - const shadowRoot = this.attachShadow({mode: 'closed'}); + const shadowRoot = this.attachShadow({ mode: "closed" }); shadowRoot.appendChild(pElem); } - } + }, ); ``` @@ -65,23 +70,23 @@ customElements.define('closed-shadow', それから click イベントリスナーを `` 要素に設定します。 ```js -document.querySelector('html').addEventListener('click',function(e) { +document.querySelector("html").addEventListener("click", (e) => { console.log(e.composed); console.log(e.composedPath()); }); ``` -まず `` 要素をクリックし、次に `` 要素をクリックすると、 2 つのことに気がつきます。第 1 に、 `click` イベントは常にシャドウの境界を越えて伝搬することができるため、 `composed` プロパティは `true` を返します。第 2 に、 2 つの要素の `composedPath` の値に違いがあります。 +まず `` 要素をクリックし、次に `` 要素をクリックすると、 2 つのことに気がつきます。第 1 に、`click` イベントは常にシャドウの境界を越えて伝搬することができるため、`composed` プロパティは `true` を返します。第 2 に、 2 つの要素の `composedPath` の値に違いがあります。 `` 要素の合成パスは次の通りです。 -```js +```plain Array [ p, ShadowRoot, open-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ] ``` それに対して `` 要素の合成パスは次の通りです。 -```js +```plain Array [ closed-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ] ``` diff --git a/files/ja/web/api/event/initevent/index.md b/files/ja/web/api/event/initevent/index.md index 2c08a8bc84d32e..4591aeb18d5f70 100644 --- a/files/ja/web/api/event/initevent/index.md +++ b/files/ja/web/api/event/initevent/index.md @@ -1,6 +1,9 @@ --- -title: Event.initEvent() +title: "Event: initEvent() メソッド" +short-title: initEvent() slug: Web/API/Event/initEvent +l10n: + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc --- {{ ApiRef("DOM") }}{{deprecated_header}} @@ -16,8 +19,8 @@ slug: Web/API/Event/initEvent ## 構文 -```js -event.initEvent(type, bubbles, cancelable); +```js-nolint +event.initEvent(type, bubbles, cancelable) ``` ### 引数 @@ -37,16 +40,20 @@ event.initEvent(type, bubbles, cancelable); ```js // イベントを作成 -const event = document.createEvent('Event'); +const event = document.createEvent("Event"); // バブルアップしキャンセルできないクリックイベントを // 作成 -event.initEvent('click', true, false); +event.initEvent("click", true, false); // イベントを待ち受けする -elem.addEventListener('click', function (e) { - // e.target matches elem -}, false); +elem.addEventListener( + "click", + (e) => { + // e.target が elem と一致 + }, + false, +); elem.dispatchEvent(event); ```