مثال 5 رویداد ها در JavaScript

اجرا
<!DOCTYPE html>
<html dir="rtl">
<body>
    <p id="demo" onmouseenter="enter()" onmouseover="over()" onmouseleave="leave()">
        ماوس خود را روی من بیاورید.
        <span>(همچنین روی من)</span>
    </p>
    
    <p>
        رخداد onmouseenter و onmouseover هر دو به محض ورود به المان اجرا می شوند.<br>
        اما اگر از هر دو رخداد به صورت همزمان استفاده شود.<br>
        هنگام ورود onmouseenter اجرا می شود و هنگام حرکت روی المان فرزند onmouseover اجرا می شود.
    </p>
    
	<script>
        // onmouseenter -> به محض ورود ماوس به المان
		function enter() {
            document.getElementById('demo').style.backgroundColor = 'red';
        }
        
        // onmouseover -> به محض ورود ماوس به المان
		// onmouseover -> حرکت ماوس روی المان
        function over() {
            document.getElementById('demo').style.backgroundColor = 'green';
        }
		
        // onmouseleave -> به محض خروج ماوس به المان
		function leave() {
            document.getElementById('demo').style.backgroundColor = 'white';
        }
	</script>
</body>
</html>