onmouseover je jedna ze základních a nejčastěji používaných událostí (events) v objektovém modelu dokumentu (DOM) při vývoji webových aplikací. K této události dojde ve chvíli, kdy uživatel najede kurzorem myši nad konkrétní HTML element nebo nad některého z jeho potomků (vnořené elementy).

Tato událost se historicky využívala k vytváření interaktivních prvků – například k rozbalování navigačních menu, zobrazování nápověd (tooltips) nebo ke změně obrázku po najetí myší. Dnes se pro čistě vizuální změny (např. změna barvy tlačítka) preferuje použití CSS pseudotřídy :hover, zatímco JavaScript a událost mouseover se využívají pro složitější aplikační logiku.

Událost lze v kódu odchytit a zpracovat třemi různými způsoby, od historických až po moderní standardy.

Nejstarší způsob, kdy se JavaScript vkládá přímo do HTML značky jako atribut. Tento přístup porušuje pravidlo oddělení struktury (HTML) a logiky (JS), proto se v moderním vývoji nepoužívá.

<button onmouseover="alert('Najel jsi na mě!')">Najeď myší</button>

Logika je přesunuta do JavaScriptu. Element se vybere pomocí jeho ID a událost se přiřadí jako vlastnost objektu. Nevýhodou je, že takto lze k elementu přiřadit pouze jednu funkci pro danou událost (přiřazení další funkce přepíše tu předchozí).

const tlacitko = document.getElementById('mojeTlacitko');
 
tlacitko.onmouseover = function() {
    console.log("Kurzor je nad tlačítkem.");
};

Moderní a standardizovaný přístup. Metoda addEventListener umožňuje navěsit na jeden element libovolné množství posluchačů pro stejnou událost bez toho, aby se navzájem přepsaly. Poznámka: Při použití této metody se název události píše bez předpony „on“, tedy pouze „mouseover“.

const tlacitko = document.getElementById('mojeTlacitko');
 
tlacitko.addEventListener('mouseover', function(event) {
    console.log("Kurzor vstoupil do elementu na souřadnicích: X=" + event.clientX + ", Y=" + event.clientY);
});

Při práci s pohybem myši začátečníci často narážejí na neočekávané chování. Existují totiž dvě velmi podobné události: mouseover a mouseenter. Rozdíl mezi nimi spočívá ve fenoménu zvaném bublání událostí (Event Bubbling).

• mouseover (Bublá): Tato událost se spustí nejen tehdy, když kurzor vstoupí do hlavního elementu, ale spustí se znovu pokaždé, když kurzor přejde nad jakýkoliv vnořený (child) element uvnitř něj. To může vést k obrovskému a nechtěnému množství spuštěných funkcí, pokud má hlavní element složitou vnitřní strukturu.
• mouseenter (Nebublá): Spustí se striktně pouze jednou – ve chvíli, kdy kurzor překročí vnější hranici hlavního elementu. Přecházení myší po vnořených elementech uvnitř už žádnou další událost nevyvolá. V praxi je proto mouseenter často mnohem bezpečnější a preferovanější volbou.

Zásadním problémem události onmouseover je její nepoužitelnost na zařízeních s dotykovou obrazovkou (smartphony, tablety). Prst uživatele se nemůže „vznášet“ nad obrazovkou a ukázat na element bez toho, aby na něj kliknul.

Pokud vývojář postaví kritickou funkcionalitu webu (např. rozbalení hlavního menu) výhradně na události mouseover, mobilní uživatelé se k obsahu nikdy nedostanou. Při moderním návrhu se proto interakce musí doplňovat o kliknutí (událost click nebo touchstart), případně se využívá responzivní design, který na mobilních zařízeních logiku „hover efektů“ zcela vypíná a nahrazuje ji klasickými tlačítky.

Pro kompletní obsluhu pohybu kurzoru se události obvykle párují. Pokud něco změníme při najetí myši, obvykle to chceme vrátit zpět při jejím odjetí.