رویدادها در jQuery | آموزش مقدماتی jQuery

در این قسمت راجع به Event ها یا رویدادها می آموزید و یاد می گیرید که چگونه رویدادها در jQuery را مدیریت کنید.

رویدادها در jQuery چه هستند؟

رویدادها در jQuery اغلب در ارتباط با و تعامل با کاربر رخ می دهد. مثلا مواردی مانند وقتی که کاربر روی دکمه یا لینکی کلیک می کند، متنی را وارد فیلدی می کنید، فیلد Select را انتخاب می کنید، کلیدی از صفحه کلید فشرده می شود، اشاره گر ماوس حرکت داده می شود و...

JQuery قابلیت ابتدایی مکانیزم مدیریت رویدادها را بهینه کرده است و برای مرورگرهای مختلف متدهای native را جهت مدیریت رویدادها بکار می گیرد. متدهایی مانند ready ،click ،keypress ،focus ،blur ،change و... برای مثال جهت اجرای کد JQuery در زمانی که DOM آماده شده است، از متد ready استفاده می شود:

<script>
$(document).ready(function(){
    // Code to be executed
    alert("Hello World!");
});
</script>

نکته: وقتی رویداد (document).(ready)$ رخ می دهد، کد می تواند با اطمینان اجرا شود زیرا DOM کاملا ساخته شده است. کد درون این رویداد تنها یکبار و آن هم زمانی که DOM ساخته شد، اجرا می گردد.

به طور معمول رویدادهای JQuery در 4 گروه مجزا تقسیم بندی می شوند: رویدادهای ماوس، رویدادهای keyboard، رویدادهای مرتبط با فرم و رویدادهای document/window. در ادامه با انواع متدهایی که در رابطه با رویدادهای ذکر شده بکار گرفته می شوند، آشنا می شوید و مثال هایی از آن ها را خواهید دید.

رویدادهای ماوس

رویداد ماوس زمانی رخ می دهد که کاربر روی عنصری کلیک می کند یا اشاره گر ماوس را حرکت می دهد و...
در ادامه با متدهای مختلفی که جهت مدیریت رویدادهای ماوس بکار گرفته می شوند، آشنا می شوید.

متد ()click

متد ()click یک تابع مدیریت کننده رویداد کلیک را به عنصر یا عناصر انتخاب شده ضمیمه می کند و به عملکرد کاربر که همان رویداد کلیک کردن روی عناصر انتخابی بود، واکنش نشان می دهد. در مثال زیر می توانید کاربرد این متد را مشاهده کنید که روی عنصر P زمانی که کاربر کلیک می کند، واکنش نشان می دهد:

<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).slideUp();
    });
});
</script>

نکته: در کد بالا کلمه کلیدی this، ارجاعی است به عنصری که انتخاب شده است. وقتی کاربر روی عنصر انتخاب شده کلیک می کند کد درون رویداد ()click به عنصر P مرتبط می شود.

متد ()dblclick

متد dblick زمانی که رویداد دو بار کلیک شدن یا همان dblclick روی عنصر یا عناصری رخ دهد، عمل می کند و تابع مدیریت کننده رویداد، کد داخل رویداد dblclick را به عنصر یا عناصر انتخاب شده متصل می کند. مثلا در کد زیر مشاهده می کنید، تگ های P که رویداد دو بار کلیک شدن یا dblclick روی آن ها اجرا شده است، محو می شوند:

<script>
$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).slideUp();
    });
});
</script>

متد ()hover

زمانی که عنصر و یا عناصری با استفاده از ماوس روی حالت hover قرار می گیرند، کدی که درون متد hover باشد به عناصری که توسط Selector ها انتخاب شده باشند، مرتبط می شوند و اجرا می گردند. توجه کنید که متد hover یک یا دو تابع مدیریت کننده رویداد را اجرا می کند: اولی برای زمانی که عناصر انتخاب شده در حالت hover قرار گرفته باشند و دومی برای زمانی که عناصر انتخاب شده از حالت hover بیرون بیایند.

مثلا در کد زیر زمانی که ماوس را روی عنصر p انتخاب شده ببرید، عنصر p هایلایت می شود و زمانی که ماوس را از روی آن بردارید، هایلایت اعمال شده حذف می گردد:

<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).addClass("highlight");
    }, function(){
        $(this).removeClass("highlight");
    });
});
</script>

نکته: می توانید در نظر بگیرید که متد ()hover ترکیبی از دو متد ()mouseenter و ()mouseleave می باشد.

متد ()mouseenter

زمانی که با ماوس روی یک عنصری برویم و در واقع عنصر انتخابی در حالت enter قرار گرفته باشد، تابع مدیریت رویداد کد داخل متد mouseenter را اجرا می کند و آن کد را به عنصر یا عناصر انتخابی مرتبط می سازد. در کد مثال زیر زمانی که با ماوس روی تگ یا عنصر p می رویم کلاس hightlight به آن افزوده می شود:

<script>
$(document).ready(function(){
    $("p").mouseenter(function(){
        $(this).addClass("highlight");
    });
});
</script>

متد ()mouseleave

زمانی که ماوس را از روی عنصر انتخابی بر می داریم، مکانیزم مدیریت کننده رویداد کد داخل متد mouseleave را برای عنصر یا عناصر انتخابی اجرا می کند. برای مثال در کد زیر، هنگامی که ماوس را از روی عنصر یا تگ p بر می داریم، کلاس highlight از آن عنصر یا تگ حذف می شود:

<script>
$(document).ready(function(){
    $("p").mouseleave(function(){
        $(this).removeClass("highlight");
    });
});
</script>

برای آگاهی بیش تر می توانید از لینک مقابل کمک بگیرید: jQuery Events Reference

رویدادهای مرتبط با keyboard

رویدادهای keyboard زمانی رخ می دهند که کاربر کلیدی را می فشارد یا آن را رها می کند و مواردی از این دست. در این قسمت با رویدادهای متداول keyboard آشنا خواهید شد و مثال هایی را در این رابطه مشاهده خواهید کرد.

متد ()keypress

زمانی این رویداد فعال می شود که کلیدی از صفحه کلید فشرده شود. در این صوررت مکانیزم مدیریت رویداد کد داخل این رویداد را به عنصر یا عناصر انتخاب شده مرتبط می سازد. در مثال زیر زمانی که روی عنصر انتخاب شده قرار دارید، به ازای تعداد بارهای فشردن کلید از keyboard پیامی بر روی صفحه ظاهر می شود:

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

توجه: رویداد keypress مشابه رویداد keydown است که در ادامه رویداد keydown را خواهید دید. با این تفاوت که کلیدهای اصلاح کننده و کلیدهای غیرچاپی مثل backspace ،space ،shift یا delete و... با رویداد keydown کار می کنند و پاسخی برای رویداد keypress نخواهند داشت.

متد ()keydown

معمولا از این متد در فرم ها استفاده می شود. به عنوان مثال وقتی یکی از فیلدهای فرمی انتخاب شده باشد و برای آن انتخاب (select) رویداد keydown نوشته شده باشد، با فشردن دکمه ای از صفحه کلید، کد داخل رویداد keydown برای عناصری که با selector انتخاب شده بودند (در اینجا همان فیلد فرم) اجرا می شود. در مثال زیر می توانید این موضوع را مشاهده کنید:

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

متد ()keyup

متد keyup نیز معمولا در جایی که فیلدهای فرم ها وجود دارند، کاربرد دارد. مثلا فرض کنید روی فیلدی قرار دارید و آن فیلد توسط selctor انتخاب شده باشد، با رها کردن دکمه، در پاسخ به فیلد یا فیلدهایی که انتخاب شده بودند، کد داخل متد keyup اجرا می گردد. مثلا در کد زیر، زمانی که روی فیلد مورد نظر قرار دارید، به تعداد بارهایی که کلیدی از صفحه کلید را «رها» می کنید و یا آن کلید را آزاد می کنید، پیامی روی صفحه نشان داده می شود:

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

نکته: رویدادهای keyboard تنها با همان فیلدهایی که انتخاب شده اند، اجرا می گردند و به صورت سراسری اجرا نمی شوند و به این دلیل است که معمولا از رویدادهای keyboard در فیلدهای فرم (مثلا فیلد text زمانی که cursor روی آن قرار دارد یا در حالت focus است) استفاده می شود.

رویدادهای form

رویدادهای فرم زمانی رخ می دهند که کاربر روی یک فیلدی focus انجام دهد و یا focus از آن فیلد برداشته شود و یا مثلا زمانی که روی فیلد text input هستید و آن را تغییر می دهید و یا کاری را با select box انجام می دهید و مواردی دیگر. در ادامه متدهای مرتبط با مدیریت رویدادهای فرم را مشاهده خواهید کرد.

متد ()change

زمانی که روی فیلدهای <input>، <textarea و <select> هستید و مقدار این فیلدها (اگر انتخاب شده باشند) تغییر کند، مکانیزم مدیریت رویدادها به متد ()change می رود و کد داخل آن را اجرا می کند. مثلا در کد زیر هر مقداری را که از dropdown انتخاب کنید، alert بر اساس آن اجرا می شود:

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

نکته: توجه کنید که در selectBox ،checkBox و radiobutton رویداد بلافاصله زمانی رخ می دهد که کاربر با ماوس کاری انجام دهد، اما برای text input و textarea رویداد زمانی رخ می دهد که focus از فیلد برداشته شده باشد.

متد ()focus

رویداد focus که اصولا در رابطه با فیلدهای فرم ها و لینک ها رخ می دهد، زمانی به وقوع می پیوندد که روی آن فیلد یا عنصر انتخابی Focus انجام شود. در این حالت کد داخل متد focus اجرا می گردد. در کد مثال زیر زمانی فیلد input در حالت focus قرار می گیرد، پیامی نشان داده می شود:

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

متد ()blur

متد blur زمانی رخ می دهد که عناصری از فرم مانند <input> ،<textarea> ،<select> از حالت focus خارج شوند. در کد مثال زیر زمانی که فیلد input از حالت focus خارج می شود، رویداد رخ می دهد و کد داخل متد ()blur اجرا می گردد:

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

متد ()submit

متد submit در رابطه با <form> رخ می دهد و زمانی به وقوع می پیوندد که کاربر تلاش می کند تا فرمی را submit کند. در کد مثال زیر پیامی مبنی بر آن که چه مقداری را وارد کرده باشید، در زمان submit نشان داده می شود:

<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 می تواند با کلیک شدن روی دکمه submit به وسیله ماوس رخ دهد. همچنین زمانی که فیلد submit در حالت focus قرار گرفته باشد، با فشردن دکمه enter این رویداد رخ خواهد داد.

رویدادهای مرتبط با document/window

در شرایطی که صفحه ساخته شده باشد و یا DOM آمده باشد، وقتی کاربر اقدام به resize و تغییر اندازه یا scroll کردن می کند، این رویداد رخ می دهد. در ادامه متدهایی که جهت مدیریت این رویداد بکار گرفته می شوند را بررسی می کنیم.

متد ()ready

این متد هنگامی رخ می دهد که DOM کاملا اجرا شده باشد و در واقع document در حالت ready قرار دارد. در کد مثال زیر زمانی که DOM ساخته می شود متنی برای پاراگراف تنظیم می شود:

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

متد ()resize

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

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

متد ()scroll

وقتی کاربر اقدام به اسکرول کردن مرورگر می کند، این رویداد رخ می می دهد و در متد ()scroll مدیریت می گردد. در مثال زیر زمانی که اسکرول رخ می دهد، پیامی نشان داده می شود:

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

هم اکنون شما با سینتکس و Selector ها در JQuery آشنا شده اید و در این قسمت نیز با یکی دیگر از ویژگی های قدرتمند یعنی مدیریت رویدادها در jQuery آشنا شدید. در ادامه آموزش JQuery مواردی را به صورت جزئی تر بررسی می کنیم.