<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
    #fatarrow,
    #bound,
    #boundhe,
    #comment-inline,
    #comment-streaming,
    #anon-object-method,
    #object-method {
      border: 1px solid #000;
      width: 200px;
      min-height: 1em;
      cursor: pointer;
    }
    </style>
    <script type="application/javascript">
      "use strict";

      /* exported init */
      function init() {
        const fatarrow = document.getElementById("fatarrow");

        const he = new HandleEventClick();
        const anonObjectMethod = document.getElementById("anon-object-method");
        anonObjectMethod.addEventListener("click", he.anonObjectMethod);

        const objectMethod = document.getElementById("object-method");
        objectMethod.addEventListener("click", he.objectMethod);

        const bhe = new BoundHandleEventClick();
        const boundheNode = document.getElementById("boundhe");
        bhe.handleEvent = bhe.handleEvent.bind(bhe);
        boundheNode.addEventListener("click", bhe);

        const boundNode = document.getElementById("bound");
        BoundClickHandler = BoundClickHandler.bind(this);
        boundNode.addEventListener("click", BoundClickHandler);

        fatarrow.addEventListener("click", () => {
          alert("Fat arrow without params!");
        });

        fatarrow.addEventListener("click", event => {
          alert("Fat arrow with 1 param!");
        });

        fatarrow.addEventListener("click", (event, foo, bar) => {
          alert("Fat arrow with 3 params!");
        });

        fatarrow.addEventListener("click", b => b);

        const inlineCommentNode = document.getElementById("comment-inline");
        inlineCommentNode
          .addEventListener("click", functionProceededByInlineComment);

        const streamingCommentNode = document.getElementById("comment-streaming");
        streamingCommentNode
          .addEventListener("click", functionProceededByStreamingComment);
      }

      function BoundClickHandler(event) {
        alert("Bound event");
      }

      function HandleEventClick(hehe) {

      }

      HandleEventClick.prototype = {
        // eslint-disable-next-line object-shorthand
        anonObjectMethod: function() {
          alert("obj.anonObjectMethod");
        },

        objectMethod: function kay() {
          alert("obj.objectMethod");
        },
      };

      function BoundHandleEventClick() {

      }

      BoundHandleEventClick.prototype = {
        handleEvent() {
          alert("boundHandleEvent");
        }
      };

      // A function proceeded with an inline comment
      function functionProceededByInlineComment() {
        alert("comment-inline");
      }

      /* A function proceeded with a streaming comment */
      function functionProceededByStreamingComment() {
        alert("comment-streaming");
      }
    </script>
  </head>
  <body onload="init();">
    <h1>Events test 2</h1>
    <div id="fatarrow">Fat arrows</div>
    <div id="boundhe">Bound handleEvent</div>
    <div id="bound">Bound event</div>
    <div id="comment-inline">Event proceeded by an inline comment</div>
    <div id="comment-streaming">Event proceeded by a streaming comment</div>
    <div id="anon-object-method">Anonymous object method</div>
    <div id="object-method">Object method</div>
  </body>
</html>
