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"
      }), ". Они являются особенными в своем поведении. Во-первых, они не включаются в реактивные обертки. Во многих случаях очень тяжело объяснить разницу между ", jsx(_components.code, {
        children: "Сигналом"
      }), " и слушателем события (", jsx(_components.code, {
        children: "event handler"
      }), "). В случае с событиями они вызываются и им не нужна реактивность они прикрепляются (", jsx(_components.code, {
        children: "bound"
      }), ") только единожды. Вы всегда можете сделать так, чтобы ваш слушатель выполнял различные операции, в зависимости от текущего состояния вашего приложения."]
    }), "\n", jsxs(_components.p, {
      children: ["Стандартные UI события (которые всплывают и композируются (", jsx(_components.code, {
        children: "composed"
      }), ")) автоматически делегируются документу. Для улучшения перформанса при делегации Solid поддерживает синтаксис в виде массива, чтобы вызывать слушателя без создания дополнительных замыканий (", jsx(_components.code, {
        children: "closures"
      }), "):"]
    }), "\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: "/* Любое действие */"
        }), "} >", 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-88ca34e3.js.map
