شبیه سازی یک رویداد برروی یک المنت با جی کوئری

گاهی اوقات نیاز داریم تا رویدادی را بصورت عمدی برروی یک المنتی اعمال کنیم! یعنی واقعا آن رویداد رخ نداده است و ما بصورت اجبار و جعلی این را به سیستم القا می‌کنیم! مثلا یک دکمه داریم، می‌خواهیم کاری کنیم که سیستم فکر کند برروی آن کلیک شده است!

روش کار

ابتدا کد HTML زیر را در نظر بگیرید:

<button id="btn1">Click Me</button>
<br>
<button id="btn2">Simulate Click</button>

حالا فرض کنید که می‌خواهیم رویداد کلیک btn1 را بصورت زیر پیاده کنیم:

$("#btn1").on('click', function() {
  alert('FuLLKade.COM');
});

بنابراین اگر روی آن کلیک شود، یک alert نمایش داده خواهد شد. اما حالا بیایید تا کاری کنیم که وقتی روی btn2 کلیک شد، برای سیستم القا شود که برروی btn1 نیز کلیک شده است! بصورت زیر:

$('#btn2').on('click', function() {
  $('#btn1').trigger(jQuery.Event('click'));
});

پس اگر بخواهیم رویدادی را برروی المنتی شبیه‌سازی کنیم، از متد trigger برروی آن استفاده کرده و یک آبجکت Event به داخل آن ارسال می‌کنیم! در بالا، نوع رویداد click است که می‌تواند چیزهای دیگری نیز باشد! مثلا اگر بخواهیم سیستم فکر کند برروی یک input text کلید Enter زده شده است، بایستی بصورت زیر عمل کرد:

$('#inp').trigger(jQuery.Event('keypress', { keycode: 13 }));

رویداد keypress که فشرده شدن کلید است را شبیه‌سازی کرده و سپس در ورودی دوم، مقدار ویژگی‌های آبجکت رویداد را تعیین می‌کنیم که در بالا، keycode یا کلید فشرده شده را برابر کلید Enter قرار دادیم.