Univerzális on metódus a jQuery-ben

Események hozzárendelésére használhatjuk az univerzális on metódust is. Első paraméterként az esemény nevét fogadja (például 'click'), a második pedig egy függvény, amelyet hozzá kell rendelni.

Nézzünk egy példát a következő HTML kódra:

<ul>
	<li>szöveg</li>
	<li>szöveg</li>
	<li>szöveg</li>
</ul>

A CSS így néz ki:

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

Most írjuk át a korábban írt kódot a li elemekre az on metódus segítségével. A működés ellenőrzéséhez kattints a lista elemeire:

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

Egy függvényt egyszerre több típusú eseményhez is hozzá lehet rendelni - ehhez felsoroljuk őket szóközzel elválasztva: 'click mousemove stb.'. Például így:

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

Rendelj minden linkhez egy eseményt - amikor a kurzor a linkre kerül, annak href értéke forduló zárójelek között jelenjen meg a szöveg végén.

Rendelj minden inputhoz egy eseményt - amikor az input elveszti a fókuszt, írja ki a saját value értékét annak a bekezdésnek, melynek id attribútuma #test.