آموزش جاوا اسکریپت – رویداد ها در جاوا اسکریپت ۲

با بخش دوم از رویداد ها در جاوا اسکریپت از سری آموزش جاوا اسکریپت در خدمت شما هستیم.

در بخش اول رویداد ها در جاوا اسکریپت با نحوه کار رویدادها و همچنین یک رویداد مهم کلیک آشنا شدیم. در این بخش قصد داریم بقیه دسته بندی مهم رویدادها را بررسی کنیم.

رویدادهای کیبورد

در این بخش از رویداد ها در جاوا اسکریپت قصد داریم رویداد کیبورد را بررسی کنیم.

یک رویداد keyboard زمانی اجرا می شود که کاربر یک دکمه از کیبورد را فشار یا رها کند.

بعضی از مهمترین رویدادهای کیبورد را در زیر می بینید :

رویداد کلید پایین (onkeydown)

رویداد keydown زمانی اجرا می شود که کاربر یک کلید را فشار می دهد. و می توانید آن را با هنلدر onkeydown مدیریت کنید.

در مثال زیر به شما یک پیام alert را زمانی که یک کلید از کیبورد فشار داده می شود نشان می دهد.

<input type="text" onkeydown="alert('You have pressed a key inside text input!')">
<textarea onkeydown="alert('You have pressed a key inside textarea!')"></textarea>

1 2	<input type="text" onkeydown="alert('You have pressed a key inside text input!')"> <textarea onkeydown="alert('You have pressed a key inside textarea!')"></textarea>

رویداد کلید بالا (onkeyup)

رویداد keyup زمانی اجرا می شود که کاربر یک کلید را فشار داده شده روی کیبورد را رها می کند می دهد. و می توانید آن را با هنلدر onkeyup مدیریت کنید.

در مثال زیر به شما یک پیام alert را زمانی که رویداد کلید بالا اجرا می شود, نشان می دهد.

<input type="text" onkeyup="alert('You have released a key inside text input!')">
<textarea onkeyup="alert('You have released a key inside textarea!')"></textarea>

1 2	<input type="text" onkeyup="alert('You have released a key inside text input!')"> <textarea onkeyup="alert('You have released a key inside textarea!')"></textarea>

رویداد فشردن کلید (onkeypress)

رویداد keypress زمانی اجرا می شود یک کاربر کلیدی را از کیبودر می فشارد که مقدار کاراکتری را ایجاد نمی کند مثلا کلیدهای Ctrl, Shift, Alt, Esc و کلیدهای جهت نما و غیره.

در مثال زیر به شما یک پیام alert را زمانی که رویداد فشردن کلید اجرا می شود, نشان می دهد.

<input type="text" onkeypress="alert('You have pressed a key inside text input!')">
<textarea onkeypress="alert('You have pressed a key inside textarea!')"></textarea>

1 2	<input type="text" onkeypress="alert('You have pressed a key inside text input!')"> <textarea onkeypress="alert('You have pressed a key inside textarea!')"></textarea>

رویدادهای فرم

در این بخش از رویداد ها در جاوا اسکریپت قصد داریم رویدادهای فرم را بررسی کنیم.

یک رویداد form زمانی اجرا می شود که تمرکز روی فرم برداشته یا دریافت می شود یا اینکه کاربر مقداری را در اینپوت فرم تایپ می کند, گزینه ای از لیست را انتخاب می کند و غیره.. .

بعضی از مهمترین رویدادهای فرم را در زیر می بینید :

رویداد تمرکز (onfocus)

رویداد focus زمانی اتفاق می افتد که کاربر به روی یک الان صفحه وب با ماوس یا کلیک روی آن برای نوشتن متمرکز می شود. و می توانید آن را با هنلدر onfocus مدیریت کنید.

در مثال زیر زمانی که روی ورودی input متمرکز می شویم, پس زمینه المان به زرد رنگ تغییر می کند.

<script>
    function highlightInput(elm){
        elm.style.background = "yellow";
    }    
</script>
<input type="text" onfocus="highlightInput(this)">
<button type="button">Button</button>

function highlightInput(elm){

elm.style.background = "yellow";

}

</script>

<button type="button">Button</button>

نکته: کلمه کلید this داخل هندلر رویداد اشاره به امن المان داخل آن را دارد (جایی که رویداد در حال رخ دادن است).

رویداد blur

رویداد blur زمانی که ما تمرکز را از روی المان مورد نظر یا صفحه بر می داریم اجرا می شود. و می توانید آن را با هنلدر onblur مدیریت کنید.

در مثال زیر زمانی که تمرکز را از ورودی input بر میداریم, یک پیام alert نمایش داده می شود.

<input type="text" onblur="alert('Text input loses focus!')">
<button type="button">Submit</button>

1 2	<input type="text" onblur="alert('Text input loses focus!')"> <button type="button">Submit</button>

برای برداشتن تمرکز از روی المان فرم ابتدا داخل المان کلیک می کنیم و سپس با کلید تب روی کیبورد, تمرکز نوشتن را روی یک المان دیگر می زاریم یا اینکه کلا یک جای دیگر خارج از المان کلیک می کنیم.

رویداد تغییر (onchange)

رویداد change زمانی که مقدار یک المان تغییر می کند اجرا می شود. و می توانید آن را با هنلدر onchange مدیریت کنید.

مثال زیر به شما یک پیام alert را زمانی که گزینه لیست انتخابی را تغییر می دهیم نمایش داده می شود.

<select onchange="alert('You have changed the selection!');">
    <option>Select</option>
    <option>Male</option>
    <option>Female</option>
</select>

<option>Select</option>

<option>Female</option>

</select>

رویداد سابمیت (onsubmit)

رویداد submit زمانی که کاربر با دکمه مورد نظر فرم را ارسال می کند اجرا می شود. و می توانید آن را با هنلدر onsubmit مدیریت کنید.

مثال زیر به شما یک پیام alert را زمانی که فرم را به سرور سابمیت می کنیم نمایش داده می شود.

<form action="action.php" method="post" onsubmit="alert('Form data will be submitted to the server!');">
    <label>First Name:</label>
    <input type="text" name="first-name" required>
    <input type="submit" value="Submit">
</form>

<label>First Name:</label>

</form>

رویداد های سند/پنجره

برای آخرین نوع از رویداد ها در جاوا اسکریپت قصد داریم رویدادهای window/document را بررسی کنیم.

رویدادها همچنین در شرایطی که صفحه لود می شود یا اندازه مرورگر را تغییر می دهیم, اجرا می شود.

بعضی از مهمترین رویدادهای سند/پنجره را در زیر می بینید :

رویداد بارگذاری (onload)

رویداد load زمانی که بارگذاری یک صفحه وب در مرورگر وب کامل شد, اجرا می شود.و می توانید آن را با هنلدر onload مدیریت کنید.

مثال زیر به شما یک پیام alert را بعد از اینکه لود صفحه کامل شد نمایش داده می شود.

<body onload="window.alert('Page is loaded successfully!');">
    <h1>This is a heading</h1>
    <p>This is paragraph of text.</p>
</body>

<h1>This is a heading</h1>

<p>This is paragraph of text.</p>

</body>

توجه داشته باشید اینجا ما این هندلر را در بخش body استفاده کردیم تا کل صفحه قابل نمایش لود را کنترل کند.

رویداد unload

رویداد unload زمانی اتفاق می افتد که کاربر صفحه فعلی را رها کنید.و می توانید آن را با هنلدر onunload مدیریت کنید.

مثال زیر به شما یک پیام alert را زمانی که قصد ترک صفحه فعلی را دارید نمایش داده می شود.

<body onunload="alert('Are you sure you want to leave this page?');">
    <h1>This is a heading</h1>
    <p>This is paragraph of text.</p>
</body>

<h1>This is a heading</h1>

<p>This is paragraph of text.</p>

</body>

رویداد تغییر اندازه (onresize)

رویداد resize زمانی که یک کاربر اندازه صفحه مروگر را تغییر می دهد رخ می دهد. همچنین رویداد resize در زمانی که پنجر مرورگر را minimize/maximize می کنید, اجرا می شود.

شما می توانید رویداد ریسایز را با هنلدر onresize مدیریت کنید.

مثال زیر به شما یک پیام alert حاوی عرض و ارتفاع جدید را هنگام تغییر اندازه مرورگر نمایش می دهد.

<p id="result"></p>
<script>
    function displayWindowSize() {
        var w = window.outerWidth;
        var h = window.outerHeight;
        var txt = "Window size: width=" + w + ", height=" + h;
        document.getElementById("result").innerHTML = txt;
    }
    window.onresize = displayWindowSize;
</script>

function displayWindowSize() {

var w = window.outerWidth;

var h = window.outerHeight;

var txt = "Window size: width=" + w + ", height=" + h;

document.getElementById("result").innerHTML = txt;

}

window.onresize = displayWindowSize;

</script>

امیدوارم از قسمت آخر رویداد ها در جاوا اسکریپت نهایت استفاده را برده باشید.

در بخش بعدی با نحوه کار با رشته ها در جاوا اسکریپت آشنا می شوید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

آموزش جاوا اسکریپت – رویداد ها در جاوا اسکریپت ۲

رویدادهای کیبورد

رویداد کلید پایین (onkeydown)

رویداد کلید بالا (onkeyup)

رویداد فشردن کلید (onkeypress)

رویدادهای فرم

رویداد تمرکز (onfocus)

رویداد blur

رویداد تغییر (onchange)

رویداد سابمیت (onsubmit)

رویداد های سند/پنجره

رویداد بارگذاری (onload)

رویداد unload

رویداد تغییر اندازه (onresize)

آموزش جاوا اسکریپت – کوکی ها در جاوا اسکریپت

آموزش جاوا اسکریپت – اعتبارسنجی فرم در جاوا اسکریپت

آموزش جاوا اسکریپت – Regular Expression در جاوا اسکریپت ۲

آموزش جاوا اسکریپت – Regular Expression در جاوا اسکریپت ۱

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه