Generic on method in jQuery

You can also use the universal method on to bind events. Its first parameter is the name of the event (e.g. 'click'), and the second parameter is the function to bind.

Let's look at an example using the following HTML code:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

CSS looks like this:

li {
	width: 100px;
	cursor: pointer;
}

Now let's rewrite the code for li, which we wrote earlier via the on method. To check the work, click on the list items:

$('li').on('click', function() {
	$(this).append('!');
});

You can bind one function to several types of events at the same time - to do this, you need to list them separated by a space: 'click mousemove and so on.'. For example, like this:

$('li').on('click mousemove', function func() {
	$(this).append('!');
});

Attach an event to all links - when you hover over a link, its href is added to the end of its text in parentheses.

Bind an event to all inputs - when focus is lost, each input outputs its value to the paragraph with id=#test.