JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

<span id="msg"></span>

JavaScript

$(document).ready(function() {
    $("ul").on({
        click: function() {
            $("#msg").text("click");
        },
        mouseenter: function() {
            $("#msg").text("mouseenter");
        },
        mouseleave: function() {
            $("#msg").text("mouseleave");
        }
    }, "li");
});