<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
    #constructed-function,
    #constructed-function-with-body-string,
    #multiple-assignment,
    #promise,
    #math-pow,
    #handleEvent {
      border: 1px solid #000;
      width: 200px;
      min-height: 1em;
      cursor: pointer;
    }
    </style>
    <script type="application/javascript">
      "use strict";

      const constructedFunc = new Function();

      const constructedFuncWithBodyString =
        new Function('a', 'b', 'c', 'alert("constructedFuncWithBodyString");');

      const multipleAssignment = function multi() {
        alert("multipleAssignment");
      }

      /* exported init */
      function init() {
        const constructedFunctionNode =
          document.getElementById("constructed-function");
        constructedFunctionNode.addEventListener("click", constructedFunc);

        const constructedFunctionWithBodyStringNode =
          document.getElementById("constructed-function-with-body-string");
        constructedFunctionWithBodyStringNode
          .addEventListener("click", constructedFuncWithBodyString);

        const multipleAssignmentNode =
          document.getElementById("multiple-assignment");
        multipleAssignmentNode.addEventListener("click", multipleAssignment);

        const promiseNode = document.getElementById("promise");
        new Promise((resolve, reject) => {
          promiseNode.addEventListener("click", resolve);
        });

        const mathPowNode = document.getElementById("math-pow");
        mathPowNode.addEventListener("click", Math.pow);

        new HandleEvent();

        document.addEventListener("click", function(foo, bar) {
          alert("document event listener clicked");
        });

        document.documentElement.addEventListener("click", function(foo2, bar2) {
          alert("documentElement event listener clicked");
        });
      }

      function Es6Method(hehe) {

      }

      Es6Method.prototype = {
        es6Method(foo, bar) {
          alert("obj.es6Method");
        }
      };

      function HandleEvent() {
        const handleEventNode = document.getElementById("handleEvent");
        handleEventNode.addEventListener("click", this);
      }

      HandleEvent.prototype = {
        // eslint-disable-next-line object-shorthand
        handleEvent: function(event) {
          switch (event.type) {
            case "click":
              alert("handleEvent click");
          }
        }
      };
    </script>
  </head>
  <body onload="init();">
    <h1>Events test 4</h1>
    <div id="constructed-function">Constructed Function</div>
    <div id="constructed-function-with-body-string">
      Constructed Function with body string
    </div>
    <div id="multiple-assignment">Multiple Assignment</div>
    <div id="promise">Promise</div>
    <div id="math-pow">Math.pow</div>
    <div id="handleEvent">HandleEvent</div>
  </body>
</html>
