<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <script src="lib_react_16.2.0_min.js"></script>
    <script src="lib_react_dom_16.2.0_min.js"></script>
    <script src="react_external_listeners.js"></script>
  </head>
  <body>
    <h1>doc_markup_events_react_production_16.2.0.html</h1>

    <div id="container"></div>

    <script>
      "use strict";

      /* global React, ReactDOM, externalCapturingFunction, externalFunction */

      class ClickMe2 extends React.Component {
        inlineFunction() {
          alert("inlineFunction");
        }

        render() {
          return React.createElement(
            "div",
            null,
            React.createElement(
              "h3",
              {
                id: "inline",
                onClick: this.inlineFunction
              },
              "Click for inlineFunction"
            ),
            React.createElement(
              "h3",
              {
                id: "external",
                onClick: externalFunction
              },
              "Click for externalFunction"
            ),
            React.createElement(
              "h3",
              {
                id: "externalinline",
                onClick: externalFunction,
                onMouseUp: this.inlineFunction
              },
              "Click for both"
            ),
            React.createElement(
              "h3",
              {
                id: "externalcapturing",
                onClickCapture: externalCapturingFunction
              },
              "Click for externalCapturingFunction"
            ),
            React.createElement(
              "h3",
              {
                id: "doublebind",
                onClick: this.inlineFunction.bind(this).bind(this)
              },
              "Click for inlineFunction bound twice"
            )
          );
        }
      }

      ReactDOM.render(
        React.createElement(ClickMe2),
        document.getElementById("container")
      );
    </script>
  </body>
</html>
