JSFiddle - React, Tailwind, and code Playground

HTML

<div id="square"></div>

CSS

div {
     width: 100px;
    height: 100px;
    border: 1px groove black;
}

JavaScript

var elem = document.getElementById('square');
$(elem).on('mousedown', function (e) {
	console.log(e);
});
$(elem).trigger('mousedown');
console.log('--------------');
elem.dispatchEvent(new Event('mousedown'));
console.log('--------------');
var e1 = document.createEvent("MouseEvents");
e1.initMouseEvent("mousedown", true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
$(elem)[0].dispatchEvent(e1);
console.log('--------------');
$(elem).trigger('mousedown');