Zdarzenia#

Typ mouseover#

Typ:mouseover
Interfejs:MouseEvent
Sync / Async:Sync
BąbelkowanieTak
Zaufane celeElement
AnulowanieTak
Domyślna akcjaBrak
Kontekst
(zaufane zdarzenia)

Zdarzenie typu mouseover musi zostać wysłane przez aplikację kliencką w chwili, kiedy urządzenie wskazujące jest przenoszone w obręb granicy elementu. Zdarzenie to jest bardzo podobne do zdarzenia mouseenter, aczkolwiek bąbelkuje i musi być wysyłane, gdy urządzenie wskazujące przesuwa się w obręb granicy elementu, którego przodkowym elementem jest cel zdarzenia dla tej samej instancji nasłuchu zdarzenia (szczegóły).

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!DOCTYPE html>
<html>

<head>

	<style>

		div {border: 3px black solid;}
		#DIV1 {background-color: #34669C; width: 400px; height: 220px;}
		#DIV2 {background-color: green; width: 300px; height: 130px; margin: 20px; margin-left: 45px;}
		#DIV3 {background-color: red; width: 200px; height: 40px; margin: 20px; margin-left: 45px;}
		#DIV4 {background-color: white; width: 400px; height: 40px;}

	</style>

</head>

<body>

	<p>Przemieszczaj wskaźnik myszy między różnymi blokami DIV.</p>

	<div id="DIV1">

		&lt;div id="DIV1"&gt;

		<div id="DIV2">

			&lt;div id="DIV2"&gt;

			<div id="DIV3">&lt;div id="DIV3"&gt;<br/>&lt;/div id="DIV3"&gt;</div>

			&lt;/div id="DIV2"&gt;
		</div>

		&lt;/div id="DIV1"&gt;
	</div>

	<div id="DIV4">&lt;div id="DIV4"&gt;<br/>&lt;/div id="DIV4"&gt;</div>

	<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia:</p>
	<p id="info"></p>

	<script>

		var div1 = document.getElementById("DIV1");
		var div4 = document.getElementById("DIV4");
		var info = document.getElementById("info");

		function readInfo(e){

			var data = "e.type: " + e.type
				+ "<br>" + "e.target.id: " + e.target.id
				+ "<br>" + "e.eventPhase: " + e.eventPhase + "<br><br>";

			info.innerHTML = info.innerHTML + data;

		}

		div1.addEventListener("mouseenter", readInfo, true);
		div1.addEventListener("mouseover", readInfo, true);

		div4.addEventListener("mouseenter", readInfo, true);
		div4.addEventListener("mouseover", readInfo, true);

	</script>

</body>

</html>

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Zdarzenia (H1) Typ mouseover (H2) Specyfikacje i inne materiały (H3)