دوره آموزش JavaScript قسمت دهم: رویدادهای جاوا اسکریپت

قسمت دهم

نوشته شده توسط: مهندس مهدی موسوی

بخش برنامه نویسی و نرم افزار|جاوا اسکریپت

قسمت های دیگر این مطلب:

رویدادها در جاوا اسکریپت شنونده‌هایی هستند که در صورت رخ دادن رویداد خاصی در صفحه فعالیت مشخصی را انجام می‌دهند.

یکی از معروفترین Event‌ها onClick است. وظیفه این متد این است که اگر روی یک آیتم کلیک شد عملیات مشخص شده را باید انجام دهد:

<html>
	<head></head>
	<body>
		<div id="main">Text Of Main Div</div>
		<script>
			document.getElementById('main').onclick = function(){
				alert("item clicked");
			};
		</script>
	</body>
</html>

سورس بالا را ذخیره و اجرا نمایید و سپس روی نوشته Text Of Main Div کلیک کنید که مشاهده خواهید کرد یک پیام PopUp با متن item clicked نمایان خواهد شد.

البته راه کار دیگری برای استفاده از این رویداد وجود دارد:

<html>
	<head></head>
	<body>
		<div id="main" onclick="alert('item clicked')">Text Of Main Div</div>
	</body>
</html>

همانطور که می‌بینید به تگ div یک خصیصه بنام onclick دادیم و درون آن دستور alert را جایگذاری نمودیم.

در پایین یک راه سوم نیز برای این کار به شما معرفی می‌کنیم:

<html>
	<head></head>
	<body>
		<div id="main" onclick="func_alert()">Text Of Main Div</div>
		<script>
			function func_alert(){
				alert("item clicked");
			}
		</script>
	</body>
</html>

درون خصیصه onclick نام تابع func_alert() را قرار می‌دهیم.

تابع func_alert را درون تگ script قرار می‌دهیم.

مثال زیر را ببینید:

<html>
	<head></head>
	<body>
		<div id="main" onclick="func(this)">Text Of Main Div</div>
		<script>
			function func(obj){
				console.log(obj.innerText);
			}
		</script>
	</body>
</html>

تابع func درون خصیصه onclick تگ div یک ورودی دارد و آن this است. this تگ فعلی را به تابع func ارسال می‌کند.

تابع func موجود در تگ script ورودی را با نام obj دریافت کرده و در سطر بعد با innerText متن درون تگ را در بخش console چاپ می‌کند.

استفاده از addEventListener

سورس زیر را ببینید:

<html>
	<head></head>
	<body>
		<div id="main">Text Of Main Div</div>
		<script>
			var main = document.getElementById("main");
			main.addEventListener('click', function(){
				alert("item Clicked");
			});
		</script>
	</body>
</html>

addEventListener دو ورودی دارد، اول نوع رویداد، و دوم تابع مورد نظر.

رویداد onmousemove

از این رویداد برای بررسی وضعیت ماوس استفاده می‌شود. کد زیر را ببینید:

<html>
	<head></head>
	<body>
		<div id="main">Text Of Main Div</div>
		<script>
			var body= document.getElementsByTagName('body')[0];
			body.onmousemove= function(e){
				console.log("x: " +e.clientX + ", y: " + e.clientY);
			}
		</script>
	</body>
</html>

نام این رویدار onmousemove است. درون function یک ورودی وجود دارد که می‌تواند وضعیت رویداد را معین کند.

در سطر بعدی تابع، مکان محور x ماوس را با e.clientX و مکان محور y ماوس را با e.clientY دریافت و چاپ می‌کنیم.