JSFiddle - React, Tailwind, and code Playground

by James Greene

HTML

<div style="display:inline-block; border: 1px red solid;">Mouse over me</div>
<button>Click me to dispatch manually</button>
<h3>Events:</h3>
<ol></ol>

<!--

* About to dispatch `mouseout`
* handle jQuery: $('#btn2').mouseleave();
* handle jQuery: $('#btn2').mouseout();
* handle non-jQuery: ('#btn2').mouseout();
* About to dispatch `mouseleave`
* handle non-jQuery: ('#btn2').mouseleave();

-->

JavaScript

var _source = "DOM";
var handler = function(e) {
    $("ol").append("<li>" + e.type + ", source: " + (_source || "DOM") + "</li>");
};

$("div").on({
    mouseenter: handler,
    mouseover:  handler
});

$("button").on("click", function(e) {
    _source = "manual";
    _fireMouseEvent({ type: "mouseover", target: $("div")[0] });
    _fireMouseEvent({ type: "mouseenter", target: $("div")[0] });
    _source = "DOM";
});


var _fireMouseEvent = function(event) {
  if (!(event && typeof event.type === "string" && event)) {
    return;
  }

  var e,
      target = event.target || event.srcElement || null,
      doc = (target && target.ownerDocument) || document,
      defaults = {
        view: doc.defaultView || _window,
        canBubble: true,
        cancelable: true,
        detail: event.type === "click" ? 1 : 0,
        button:
          typeof event.which === "number" ?
          (event.which - 1) :
          (
            typeof event.button === "number" ?
            event.button :
            (doc.createEvent ? 0 : 1)
          )
      },
      // Update the Event data to its final state
      args = $.extend(defaults, event);

  if (!target) {
    return;
  }

  // Create and fire the MouseEvent
  if (doc.createEvent && target.dispatchEvent) {
    args = [
      args.type, args.canBubble, args.cancelable, args.view, args.detail,
      args.screenX, args.screenY, args.clientX, args.clientY,
      args.ctrlKey, args.altKey, args.shiftKey, args.metaKey,
      args.button, args.relatedTarget
    ];
    e = doc.createEvent("MouseEvents");
    if (e.initMouseEvent) {
      e.initMouseEvent.apply(e, args);
      target.dispatchEvent(e);
    }
  }
  else if (doc.createEventObject && target.fireEvent) {
    e = doc.createEventObject(args);
    target.fireEvent("on" + args.type, e);
  }
};