دسته بندی:آموزش برنامه نویسی

تاریخ انتشار:پنج شنبه 23 شهریور 1402

نویسنده:مهدی جام گوهری

رویداد(event) ها در JavaScript و HTML

رویداد ها در html یکی راه های مهم برای انجام عملیات های مد نظر کاربر می باشد که از قضا جاوا اسکریپت به این رویداد ها واکنش نشان می دهد . تنوع در نوع و نحوه به کار گیری این رویداد ها بسیار گسترده بوده که در این مقاله سعی بر آن شده است که کاربر گرامی را به استفاده ی از این رویداد ها سوق دهد .

برای دریافت اطلاعات بیشتر و پی بردن به تاریخچه ی جاوا اسکریپت به مقاله ی زیر مراجعه کنید :

رویداد (event) در html چیست ؟

به طور کلی این رویداد ها مجموعه تعاملاتی است که مابین HTML و JavaScript رد و بدل میشود . به طور مثال هنگامی که در وبسایتی بر روی دکمه ای کلیک میشود یا با فشردن کلیدی روی صفحه کلید مجموعه اتفاقاتی در وبسایت رخ میدهد ، عامل این اتفاقات همان رویداد ها می باشد .

Event in js & html — JavaScript & Html & Css

چگونه رویداد ها را فراخوانی کنیم؟

به طور کلی دو راه برای فراخوانی رویداد ها در HTML و JavaScript وجود دارد که در ادامه به آن خواهیم پرداخت .

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

فراخوانی رویداد(event) در JavaScript

برای فراخوانی event در جاوا اسکریپت که با استفاده از درخت Dom صورت می پزیرد ( ابتدا کلمه ی کلیدی document. و سپس انتخاب یک متد(method) یا به اصطلاح یک راه دریافت عنصر(Element) مد نظر کاربر با استفاده از id یا نام class و یا راه های مشابه)می بایست کار ها را پیش برد .
بعد از گرفتن (call کردن Element) عنصر نوبت به ایجاد رویداد مد نظر میرسد که به راحتی قابل انجام است ; کافی است که با استفاده از کلمه ی کلیدی "addEventListener(" " , function)" و نوشتن رویداد مد نظر در قسمت اول (یعنی مابین "double cotated") و در قسمت بعد انجام عملیات مد نظر کاربر (یعنی ایجاد یا فراخوانی function ) ، عملیاتی را فراخوانی کرد .

به مثال زیر که نمونه ای ایجاد event میباشد توجه نمایید

      
        <!DOCTYPE html>
          <html>
            <head>
              <script>
                document.querySelector(".surprising button").addEventListener("click" , ()=>{
                  alert("Surprise! well you won")
                });
              </script>
            </head>
            <body>
              <div class="surprising">
                <button>
                  click me!
                </button>
              </div>
            </body>
          </html>

در قسمت بالا وقتی دکمه با نام click me! را کلیک کنیم در حقیقت یک event را فراخوانی کرده ایم که بلافاصله بعد از فشردن کلید سایت دچار تحول میشود .

در قسمت پایین بعضی از event ها که در قسمت"double cotated" قرار میگیرد آورده شده است .

"change": هنگام تغییر یک عنصر (Element) این رویداد رخ میدهد
"click": هنگام کلیک شدن(توسط ماوس) این رویداد رخ میدهد
"load": هنگام بارگیری کامل وبسایت این رویداد رخ میدهد
"keydown"یا"keypress": هنگامی که یک دکمه صفحه کلید توسط کاربر فشرده میشود این رویداد رخ میدهد
"mousedown": وقتی کلیک ماوس فشار داده شود این رویداد رخ میدهد
"mousemove": وقتی ماوس بروی یک عنصر قرار بگیرد این رویداد رخ میدهد
"focus": وقتی تمرکز ماوس بروی یک عنصر قرار بگیرد این رویداد رخ میدهد

فراخوانی رویداد(event) در HTML

برای فراخوانی رویداد ها در html می بایست که نام رویداد مورد نظر را با اضافه کردن کلید واژه ی "on"به ابتدای رویداد به صورت یک attribute در عنصر (Element) مورد نظر یاد داشت کرد و سپس دستور یا عملیات مدنظر را به آن نسبت داد .

به مثال زیر که در باره ی رویدادها در html است توجه نمایید .

      
        <!DOCTYPE html>
          <html>
            <head>
              <!-- ... -->
            </head>
            <body>
              <div>
                <button onclick="alert('hello there!.')">
                  click me!
                </button>
              </div>
            </body>
          </html>

یا در فراخوانی دستورالعملی شامل چند خط کد جاوا اسکریپتی میتوان نام تابع مد نظر را بین "double cotated" گذاشته سپس با قرار دادن () جلوی نام تابع ، function مد نظر را فراخوانی کنید .

مانند مثال زیر که دستورالعملی را فرا میخواند .

        
          <!DOCTYPE html>
            <html>
              <head>
                <script>
                  function LearnEvent(){
                    let ShowName = prompt("what is your name:","");
                    alert(`hello ${ShowName}`);
                  }
                </script>
              </head>
              <body>
                <div>
                  <button onclick="LearnEvent()">
                    click me!
                  </button>
                </div>
              </body>
            </html>

تذکر مجدد ، کاربر گرامی برای فراخوانی رویداد ها در html ابتدا پیشوند "on" را به ابتدای رویداد (event) مدنظر چسبانده و سپس فراخوانی میکنیم .

سخن پایانی

در پایان شرکت برنامه نویسی وارنا امید وار است که به کاربران محترمی که مقاله را مطالعه نموده اند کمک کرده باشد
شما می توانید برای دریافت اموزش تمامی نکات کاربردی JavaScript به سایت شرکت برنامه نویسی وارنا مراجعه نموده و در قسمت اموزش ها ضمن خرید دوره جاوا اسکریپت (JS) + تضمین استخدامی از امکان پشتیبانی 24 ساعته جهت رفع اشکال و بالا بردن سطح تسلط خود استفاده نمایید. همچنین شرکت برنامه نویسی وارنا به دنبال جذب افراد مستعد و علاقه مند به برنامه نویسی است که اطلاعات کامل ان در بخش اموزش و استخدام سایت وارنا موجود می باشد.