events.html 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style type="text/css">
  7. div {
  8. float: left;
  9. height: 300px;
  10. width: 400px;
  11. margin: 0;
  12. background-color: orange;
  13. }
  14. span {
  15. display: block;
  16. text-align: center;
  17. height: 50%;
  18. width: 50%;
  19. margin: 75px 25% 75px 25%;
  20. padding: 10%;
  21. box-sizing: border-box;
  22. background-color: lightsteelblue;
  23. }
  24. p {
  25. float: left;
  26. height: 300px;
  27. width: 400px;
  28. margin: 0;
  29. background-color: chartreuse;
  30. }
  31. </style>
  32. <script src="jquery.js"></script>
  33. <script>
  34. function notify(e) {
  35. var current = e.currentTarget;
  36. var target = e.target;
  37. var join = Array.prototype.join;
  38. // Element.classList is not an Array but just an Object
  39. var currentClasses = join.call(current.classList || [], ' ');
  40. var targetClasses = join.call(target.classList || [], ' ');
  41. console.log(current.tagName, currentClasses, 'from', target.tagName, targetClasses);
  42. // Vanilla JS:
  43. // e = e || window.event; // Needed for IE, which does not pass the event to handlers.
  44. // var target = e.target || e.srcElement; // srcElement for IE, target for every other browser,
  45. // // Defeat Safari bug: if an event takes place on an element that contains
  46. // // text, this text node, and not the element, becomes the target of the
  47. // // event. Therefore we check if the target's nodeType is 3, a text node.
  48. // // If it is we move to its parent node, the HTML element.
  49. // if (target.nodeType == 3) {
  50. // target = target.parentNode;
  51. // }
  52. // console.log(e, target.tagName, target.classList, target.nodeType);
  53. }
  54. $(function () {
  55. $('body').find('*').click(notify);
  56. });
  57. </script>
  58. </head>
  59. <body>
  60. <div class="foo">
  61. Text
  62. <span class="bar">
  63. <a href="#">The quick brown fox jumps over the lazy dog.</a>
  64. </span>
  65. </div>
  66. <p>How razorback-jumping frogs can level six piqued gymnasts!</p>
  67. </body>
  68. </html>