OSInet
/
learning_jquery


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    div {
      float: left;
      height: 300px;
      width: 400px;
      margin: 0;
      background-color: orange;
    }

    span {
      display: block;
      text-align: center;
      height: 50%;
      width: 50%;
      margin: 75px 25% 75px 25%;
      padding: 10%;
      box-sizing: border-box;
      background-color: lightsteelblue;
    }

    p {
      float: left;
      height: 300px;
      width: 400px;
      margin: 0;
      background-color: chartreuse;
    }
  </style>
  <script src="jquery.js"></script>
  <script>
    function notify(e) {
      var current = e.currentTarget;
      var target = e.target;
      var join = Array.prototype.join;
      // Element.classList is not an Array but just an Object
      var currentClasses = join.call(current.classList || [], ' ');
      var targetClasses = join.call(target.classList || [], ' ');
      console.log(current.tagName, currentClasses, 'from', target.tagName, targetClasses);

// Vanilla JS:
//      e = e || window.event; // Needed for IE, which does not pass the event to handlers.
//      var target = e.target || e.srcElement; // srcElement for IE, target for every other browser,
//      // Defeat Safari bug: if an event takes place on an element that contains
//      // text, this text node, and not the element, becomes the target of the
//      // event. Therefore we check if the target's nodeType is 3, a text node.
//      // If it is we move to its parent node, the HTML element.
//      if (target.nodeType == 3) {
//        target = target.parentNode;
//      }
//      console.log(e, target.tagName, target.classList, target.nodeType);
    }

    $(function () {
      $('body').find('*').click(notify);
    });
  </script>
</head>

<body>
  <div class="foo">
    Text
    <span class="bar">
      <a href="#">The quick brown fox jumps over the lazy dog.</a>
    </span>
  </div>
  <p>How razorback-jumping frogs can level six piqued gymnasts!</p>
</body>
</html>