رویدادها در jQuery

در بخش اول مدیریت رویدادها در jQuery با انواع رویدادهای جی کوئری و رویداد ماوس آشنا شدیم. در بخش دوم قصد داریم مابقی رویدادهای مهم را بررسی کنیم.

رویدادهای کیبورد (Keyboard)

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

بعضی از پر استفاده ترین متدها جی کوئری برای مدیریت رویدادهای کیبورد را اینجا می بینید.

متد keypress()

متد keypress() جی کوئری یک تابع مدیریت رویداد را به المان های انتخاب شده (معمولا کنترل های فرم) در زمانی که مرورگر یک ورودی کیبورد را از کاربر دریافت کند, متصل می کند.

مثال زیر یک پیام را زمانی که رویداد keypress رخ می دهد و همچنین تعداد فشردن دکمه را نیز نشان می دهد.

<script type="text/javascript">
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keypress(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

$(document).ready(function(){

var i = 0;

$('input[type="text"]').keypress(function(){

$("span").text(i += 1);

$("p").show().fadeOut();

});

</script>

نکته: رویداد keypress مشابه رویداد keydown است, بجز کلیدهایی غیرقابل پرینت مثل Shift, Esc, Backspace, Delete و جهت نما و مشابه آن که رویداد keydown را اجرا می کنند نه رویداد keypress .

متد keydown()

متد keydown() در جی کوئری یک تابع مدیریت رویداد را به المان های انتخاب شده (معمولا کنترل های فرم) در زمانی که کاربر اولین کلید از کیبورد را فشار می دهد اجرا می شود, متصل می کند.

مثال زیر به شما یک پیام در زمان رخداد رویداد keydown و تعداد دفعاتی که کلیدهای روی کیبورد را فشار دادید, نمایش می دهد.

<script type="text/javascript">
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keydown(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

$(document).ready(function(){

var i = 0;

$('input[type="text"]').keydown(function(){

$("span").text(i += 1);

$("p").show().fadeOut();

});

</script>

متد keyup()

متد keyup() جی کوئری, یک تابع مدیریت رویداد را به المان های انتخاب شده (معمولا کنترل های فرم) در زمانی که کاربر یک کلید فشرده شده را رها می کند, متصل می کند.

مثال زیر به شما یک پیام در زمان رخداد رویداد keyup و تعداد دفعاتی که کلیدهای روی کیبورد فشار و رها شده, نمایش می دهد.

<script type="text/javascript">
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keyup(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

$(document).ready(function(){

var i = 0;

$('input[type="text"]').keyup(function(){

$("span").text(i += 1);

$("p").show().fadeOut();

});

</script>

نکته : رویدادهای کیبورد می توانند به هر المانی متصل شوند اما این رویداد فقط به المانی که روی آن متمرکز (focus) شده ارسال می شود. به همین دلیل است که رویدادهای کیبورد معمولا به کنترل های فرم مثل ورودی متن یا input ها متصل می شود.

رویداد های فرم (Form)

یک رویداد فرم زمانی رخ می دهد که کاربر مقداری را تغییر/وارد کند مثل تایپ کردن متن در یک ورودی, انتخاب یکی از گزینه های selectbox و غیره.

متد change()

متد change() جی کوئری یک تابع مدیریت رویداد را به المان های <input>, <textarea>, <select> که هنگام تغییر مقادیر آنها اجرا می شود را متصل می کند.

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

<script type="text/javascript">
$(document).ready(function(){
    $("select").change(function(){
        var selectedOption = $(this).find(":selected").val();
        alert("You have selected - " + selectedOption);
    });
});
</script>

$(document).ready(function(){

$("select").change(function(){

var selectedOption = $(this).find(":selected").val();

alert("You have selected - " + selectedOption);

});

</script>

نکته: برای selectbox ها و radio-button ها, این رویداد به محض اینکه کاربر انتخابی می کند رخ می دهد برای برای ورودی های متن بعد از از دست دادن فوکوس روی المان اجرا می شود.

متد focus()

متد focus() یک تابع مدیریت رویداد را به المان های انتخاب شده (معمولا کنترل های فرم و لینک ها) در زمانی که روی آنها focus می شود را متصل می کند.

مثال زیر به شما یک پیام به هنگام دریافت focus روی ورودی متن input را نشان می دهد.

<script type="text/javascript">
$(document).ready(function(){
    $("input").focus(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>

$(document).ready(function(){

$("input").focus(function(){

$(this).next("span").show().fadeOut("slow");

});

</script>

متد blur()

متد blur() یک تابع مدیریت رویداد را به المان های فرم مثل <input>, <textarea>, <select> در زمان از دست دادن focus را متصل می کند.

مثال زیر به محض از دست دادن focus یک متن را نمایش می دهد.

<script type="text/javascript">
$(document).ready(function(){
    $("input").blur(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>

$(document).ready(function(){

$("input").blur(function(){

$(this).next("span").show().fadeOut("slow");

});

</script>

متد submit()

متد submit() یک تابع مدیریت رویداد را به المان های <form> در زمانی که کاربر قصد سابمیت/ارسال فرم را دارد متصل می کند.

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

<script type="text/javascript">
$(document).ready(function(){
    $("form").submit(function(event){
        var regex = /^[a-zA-Z]+$/;
        var currentValue = $("#firstName").val();
        if(regex.test(currentValue) == false){
            $("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
            // Preventing form submission
            event.preventDefault();
        }
    });
});
</script>

$(document).ready(function(){

$("form").submit(function(event){

var regex = /^[a-zA-Z]+$/;

var currentValue = $("#firstName").val();

if(regex.test(currentValue) == false){

$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);

// Preventing form submission

event.preventDefault();

}

});

</script>

نکته: یک فرم می تواند با کلیک روی دکمه submit یا فشردن Enter هنگام focus بودن فرم, سابمیت/ارسال شود.

رویدادهای سند / پنجره (Document / Window)

رویدادها در شرایطی که صفحه DOM آماده (ready) یا تغییر اندازه (resize) یا اسکرول (scroll) و … رخ دهند.

اینجا چندین متد پر استفاده برای این چنین رویدادها را بررسی می کنیم.

متد ready()

متد ready() یک تابع را برای اجرا شدن در هنگام بارگذاری کامل DOM , مشخص می کند.

مثال زیر متن پاراگراف ها به محص اینکه سلسله مراتب DOM کاملا ساخته و آماده دستکاری باشد, تغییر می دهد.

<script type="text/javascript">
$(document).ready(function(){
    $("p").text("The DOM is now loaded and can be manipulated.");
});
</script>

$(document).ready(function(){

$("p").text("The DOM is now loaded and can be manipulated.");

});

</script>

متد resize()

متد resize() یک تابع مدیریت رویداد (event handler) را به المان window متصل می کنید که هنگام تغییر اندازه پنجره مرورگر اجرا می شود.

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

<script type="text/javascript">
$(document).ready(function(){
    $(window).resize(function() {
        $(window).bind("resize", function(){ 
            $("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
        });
    });
});
</script>

$(document).ready(function(){

$(window).resize(function() {

$(window).bind("resize", function(){

$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());

});

</script>

متد scroll()

متد scroll در جی کویری یک تابع مدیریت رویداد را به پنجره مرورگر یا iframe و المان های قابل اسکرول متصل می کند که هنگام تغییر موقعیت اسکرول المان اجرا می شود.

<script type="text/javascript">
$(document).ready(function(){
    $(window).scroll(function() {
        $("p").show().fadeOut("slow");
    });
});
</script>

$(document).ready(function(){

$(window).scroll(function() {

$("p").show().fadeOut("slow");

});

</script>

امیدوارم در این بخش آموزش جی کوئری, از رویدادها در jQuery نهایت استفاده را برده باشید.

در بخش بعدی با افکت های جی کوئری , آشنا می شوید.

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

موفق باشید

رویدادها در jQuery – بخش دوم

رویدادهای کیبورد (Keyboard)

متد keypress()

متد keydown()

متد keyup()

رویداد های فرم (Form)

متد change()

متد focus()

متد blur()

متد submit()

رویدادهای سند / پنجره (Document / Window)

متد ready()

متد resize()

متد scroll()

ساخت اسلایدر تصاویر با jQuery به همراه آپلود فایل چندگانه با PHP

رویدادها در jQuery – بخش اول

آموزش جی کوئری – سلکتورها در jQuery (انتخاب گرها)

آموزش جی کوئری – مقدمه

لغو پاسخ

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

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

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