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 事件（冒泡和组合）会自动委托给文档元素。为了提高委托性能，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"
        }), " = (", jsxs(_components.span, {
          className: "hljs-params",
          children: ["data, event ", jsx(_components.span, {
            className: "hljs-comment",
            children: "/*...*/"
          })]
        }), ") => (\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"]
      })
    }), "\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: "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: "WierdEventName"
        }), "={", 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-3c58420f.js.map
