examples/testing-dom__hover-hidden-elements/mouse.html

<!DOCTYPE html>
<html>
<head>
  <title>Hover and Hidden Elements - Mouse</title>
  <script type="text/javascript" src="/node_modules/jquery/dist/jquery.js"></script>
  <style>
    #background {
      padding: 50px;
      background-color: #eee;
    }
  </style>
</head>
<body>
  <h2>
    mouse.html
  </h2>
  <div id="background">
    <button id="with-jquery">(jquery) Mouse over me</button>
    <button id="no-jquery">(no jquery) Mouse over me</button>
  </div>

  <ul id="messages"></ul>

  <script type="text/javascript">
    var $btnJquery   = $("#with-jquery")
    var btnNoJquery  = $("#no-jquery").get(0)
    var $msgs        = $("#messages");

    // when our buttons have these mouse events fired on it
    // we want to populate <p id="message"> with the event
    ["mouseover", "mouseout", "mouseenter", "mouseleave"].forEach(function(event){
      var append = function(){
        // append the <li> message into the messages <ul>
        var $li = $("<li />").text("the event " + event + " was fired")

        $msgs.append($li)
      }

      // add native DOM event listener to this button
      btnNoJquery.addEventListener(event, append)

      // add jquery bound event listener to this button
      $btnJquery.on(event, append)
    })
  </script>
</body>
</html>