jQuery .on() method with multiple event handlers

If you need multiple event handlers attached to the same selector executing the same function, you could use:

$(document).ready(function() {
 $(".field").on('click mouseover', function() {
    $(".spn").text("Hello world!");
 });
});

Learn more about jQuery events here.

What does this function really do? We have two div elements on our page and two different classes .field and .spn. When we click or mouseover over the .field class, the .spn div is showing the “Hello world!” text added via jQuery .text() method.

Try it Yourself / Demo