import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: ["Solid のイベントは、属性の前に ", jsx(_components.code, {
        children: "on"
      }), " が付いています。いくつかの点で特別に扱われています。まず、通常のラッピングの経験則に従いません。多くの場合、Signal とイベントハンドラーの違いを判断することは困難です。そして、イベントは呼び出され、更新するためのリアクティビティを必要としないので、最初にバインドされるだけです。アプリの現在の状態に応じてハンドラーに異なるコードを実行させることができます。"]
    }), "\n", jsx(_components.p, {
      children: "一般的な UI イベント（バブルが発生して合成されるもの）は、自動的に document に委譲されます。 委譲のパフォーマンスを向上させるために、Solid は追加のクロージャを作成せずにデータ（第一引数）を使用してハンドラーを呼び出すための配列構文をサポートしています:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "handler"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "data, event"
        }), ") => ", jsx(_components.span, {
          className: "hljs-comment",
          children: "/*...*/"
        }), "\n\n", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "button"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "onClick"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{[handler,"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "data"
            }), "]}>"]
          }), "Click Me", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "button"
            }), ">"]
          })]
        }), "\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["この例では、ハンドラーを ", jsx(_components.code, {
        children: "mousemove"
      }), " イベントにアタッチしてみましょう:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<div onMouseMove={handleMouseMove}>\n  ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "The"
        }), " mouse position is {", jsx(_components.span, {
          className: "hljs-title function_",
          children: "pos"
        }), "().", jsx(_components.span, {
          className: "hljs-property",
          children: "x"
        }), "} x {", jsx(_components.span, {
          className: "hljs-title function_",
          children: "pos"
        }), "().", jsx(_components.span, {
          className: "hljs-property",
          children: "y"
        }), "}\n</div>\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["すべての ", jsx(_components.code, {
        children: "on"
      }), " バインディングは大文字小文字を区別しないので、イベント名は小文字である必要があります。例えば、", jsx(_components.code, {
        children: "onMouseMove"
      }), " はイベント名 ", jsx(_components.code, {
        children: "mousemove"
      }), " を監視します。大文字が入ったイベント名をサポートする必要がある場合や、イベントの委譲を使用しない場合は、名前空間 ", jsx(_components.code, {
        children: "on:"
      }), " を使用してコロンの後に続くイベントハンドラーをマッチさせることができます:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<button ", jsx(_components.span, {
          className: "hljs-attr",
          children: "on"
        }), ":", jsx(_components.span, {
          className: "hljs-title class_",
          children: "DOMContentLoaded"
        }), "={", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-comment",
          children: "/* Do something */"
        }), "} >", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Click"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Me"
        }), "</button>\n"]
      })
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=lesson-1bc00694.js.map
