JSFiddle - React, Tailwind, and code Playground

by Bozon

HTML

<!DOCTYPE html>
<html>
 <head></head>
 <body>
<div id="div1">CLICK HERE ( div1 )</div>
<div id="output"></div>
 </body> 
</html>

CSS

#div1 {background-color:red;width:150px;height:50px;}
  #div2 {background-color:yellow;width:150px;height:50px;}
  #output {margin:15px;width:50%}

JavaScript

$(document).ready(function() {

  var selector = '#div1';
  $('body').on("click", selector, function() {
    output("click #1 = " + selector);
  });

  $('body').on("click", selector, function() {
    output("click #2 = " + selector);
  });

  $(selector).click(function() {
    output("click #3 = " + selector);
  })
  $(selector).click(function() {
    output("click #4 = " + selector);
  })

  var elem = $(selector).get(0);
  var all_events = $.data(elem, 'events') || $._data(elem).events;
  if (typeof all_events !== "undefined") {
    all_events['click'].reverse();
  } else {
    output("all_events is undefined");
  }
  //output( all_events['click'] );

function output(text) {
  console.log(text);
  $("#output").html(function(i, h) {
    return h + text + "<br />";
  });
}

});