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: ["Events sind in Solid attribute mit einem ", jsx(_components.code, {
        children: "on"
      }), "-Präfix. Sie werden in ein paar Dingen besonders gehandhabt. Zunächst folgen sie nicht der normalen Heuristik für Kapselung. In vielen Fällen ist es schwierig, den Unterschied zwischen einem Signal und einem Event Handler zu erkennen. Und da Events aufgerufen werden und keine Reaktivität zum AKtualisieren bruachen, werden sie ausschließlich initial gebunden. Man kann immer noch den Handler unterschiedlichen Code je nach dem gegenwärtigen Zustand der Anwendung ausführen lassen."]
    }), "\n", jsx(_components.p, {
      children: "Normale UI Events (die bubbeln und zusammengestellt sind) werden automatisch zum document delegiert. Um die Performanz des Delegierens zu verbessern, unterstützt Solid einen Array-Syntax, der den Handler mit Daten als erstes Argument aufruft, ohne zusätzliche Closures zu generieren:"
    }), "\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: ["In unserem Beispiel fügen wir einen Handler für das ", jsx(_components.code, {
        children: "mousemove"
      }), " Event hinzu:"]
    }), "\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: ["Alle ", jsx(_components.code, {
        children: "on"
      }), "-Bindungen sind unabhängig von Groß-/Kleinschreibung, so dass die Namen der tatsächlichen Events immer klein geschrieben werden. Beispielsweise überwacht ", jsx(_components.code, {
        children: "onMouseMove"
      }), " das ", jsx(_components.code, {
        children: "mousemove"
      }), "-Event. Falls etwa für ein benutzerdefiniertes Event Groß-Kleinschreibung benötigt wird oder die Event-Delegation umgangen werden soll, kann der ", jsx(_components.code, {
        children: "on:"
      }), "-Namespace dazu verwendet werden um Event-Handler zu übergeben, deren Name dann nach dem Doppelpunkt kommt:"]
    }), "\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: "/* Mache etwas */"
        }), "} >", 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-35eae504.js.map
