JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="idButtonTrigger" onmouseover="TriggerEvent()">Hover to Trigger Event</button>
<button id="idButtonDispatch" onmouseover="DispatchEvent()">Hover to Dispatch Event</button>
<p>ClickListener: <a id="idClickListener"></a></p>
<p>ClickBind: <a id="idClickBind"></a></p>
<p>CustomListener: <a id="idCustomListener"></a></p>
<p>CustomBind: <a id="idCustomBind"></a></p>
<script type="text/javascript">
document.addEventListener('click', function(event) {
document.getElementById('idClickListener').innerHTML = "Fired!";
$('#idClickListener').fadeIn('slow').fadeOut('slow');
});
$(document).bind('click', function(event) {
document.getElementById('idClickBind').innerHTML = "Fired!";
$('#idClickBind').fadeIn('slow').fadeOut('slow');
});
document.addEventListener('custom', function(event) {
document.getElementById('idCustomListener').innerHTML = "Fired!";
$('#idCustomListener').fadeIn('slow').fadeOut('slow');
});
$(document).bind('custom', function(event) {
document.getElementById('idCustomBind').innerHTML = "Fired!";
$('#idCustomBind').fadeIn('slow').fadeOut('slow');
});
function TriggerEvent() {
$('#idButtonTrigger').trigger('click');
// The trigger function below should also dispatch the custom event such that code using addEventListener can catch this custom event.
// However, that is not happening. In fact, this is the only of the 8 combinations listed below that does not work.
// We should fix this to allow better interoperability between jQuery event functions and W3C DOM event functions.
// 1. PASS: If you trigger a DOM event you can catch it using the bind function
// 2. PASS: If you trigger a DOM event you can catch it using the addEventListener function
// 3. PASS: If you trigger a custom event you...