event در جاوا اسکریپت

به طور کلی جاوا اسکریپت و html از طریق رویداد هایی باهم ارتباط برقرار می کنند، event در جاوا اسکریپت زمانی اتفاق می افتند که کاربر یا مرورگر در صفحه کاری انجام دهند. برای مثال هنگامی که کاربر ماوس خود را حرکت می دهد یک رویداد حساب می شود. به طور کلی هر کاری که […]

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

به طور کلی جاوا اسکریپت و html از طریق رویداد هایی باهم ارتباط برقرار می کنند، event در جاوا اسکریپت زمانی اتفاق می افتند که کاربر یا مرورگر در صفحه کاری انجام دهند. برای مثال هنگامی که کاربر ماوس خود را حرکت می دهد یک رویداد حساب می شود. به طور کلی هر کاری که کاربر یا مرورگر در صفحه انجام می دهند یک رویداد به حساب می شود. اگر قصد دارید رویداد ها و کاربرد آن ها را بشناسید، در ادامه انواع آن ها را توضیح داده ایم.

روش استفاده از رویداد در html

اما پیش از هر چیز، بهتر است راجب روش استفاده از رویداد ها در سند html صحبت کنیم. به طور کلی استفاده از رویداد ها، ۳ روش را دارا می باشد، که در ادامه روش های آن را همراه با مثال برای شما توضیح داده ایم.

استفاده از رویداد با اتریبیوت

در این روش شما با استفاده از اتریبیوت یک رویداد، تابع آن را مانند کد زیر در تگ script فرواخوانی می کنید. در بخش زیر مثال استفاده از این رویداد قرار داده ایم.


<html>
  <body>
      <h1 onclick="handleEvent()">سلام دنیا</h1>
       <script>
              function handle(){
              alert('رویداد نشان داده شد')
             }
       </script>
  </body>
</html>

روش استفاده از رویداد در جاوا اسکریپت

در این روش با استفاده از تگ اسکریپت و class بخش مورد نظر، شما می توانید مانند کد های زیر از رویداد مورد نظر استفاده کنید.


<html>
  <body>
      <h1 class="Armin">سلام دنیا</h1>
      <script>
            
         window.document.querySelector('Armin').onclick=handleEvent;
          
      </script>
  </body>
</html>

استفاده از رویداد در جاوا اسکریپت با استفاده از متود

در این روش شما با استفاده از تگ script و متود addEventListener می توانید مطابق کد زیر، رویداد مورد نظر را استفاده کنید.


<html>
  <body>
     <h1 class="Armin">سلام دنیا</h1>
     <script> window.document.querySelector('.Armin').addEventListener('click',handleEvent)
     </script>
  </body>
</html>

لیست رویداد های javascript

  • onclick
  • onmouseover
  • onmouseout
  • onmousedown
  • onmouseup
  • onmousemove
  • onfocus
  • onsubmit
  • onblur
  • onchange
  • onload
  • onunload
  • onresize

رویداد onclick در جاوا اسکریپت

این رویداد که یکی از پر استفاده ترین رویداد ها است، در پاسخ کلیک کردن کاربر پاسخ می دهد. به طور دقیق تر با این رویداد می توانید مشخص کنید که بعد از کلیک کردن کاربر، چه اتفاقی بی افتد. برای استفاده از این رویداد می توانید از دو روش استفاده در کد html و استفاده در تگ جاوا اسکریپت استفاده کنید که نمونه آن در بخش زیر قرار داده شده است. البته پیشنهاد می شود که از روش تگ اسکریپت استفاده کنید، چرا که روش html برای سئوی سایت زیاد مفید نمی باشد.

روش استفاده از رویداد onclick در html


<button on‌‌‌click="alert('سلام')">!کلیک کنید</button>

روش استفاده از رویداد onclick در تگ اسکریپت


<button id="js"  on‌click="Armin()">کلیک کنید</button>
<script>
function Armin(){
alert("سلام");
}
</script>

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

رویداد Onsubmit در جاوا اسکریپت

این رویداد بیشتر در هنگام ثبت فرم و یا ارسال نظرات در یک سایت اتفاق می افتد، به طوری که وقتی کاربر بر روی دکمه ثبت یا ارسال کلیک می کند، یک پیغام موفقیت نمایش داده می شود. برای استفاده از این رویداد، باید کد آن را مانند بخش html زیر استفاده کنید.


<html>
     <body>
     <form action="/action_page.php" onsubmit="myFunction()">
         Enter name: <input type="text" name="fname">
            <input type="submit" value="Submit">
     </form>

     <script>
         function myFunction() {
        alert("The form was submitted");
       }
     </script>

   </body>
</html>

رویداد onmouseover و onmouseout در جاوا اسکریپت

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


<html>
    <body>

          <p id="Armin">توشته یا دکمه مورد نظر</p>

          <script>
                  document.getElementById("Armin").onmouseover = function()                    {mouseOver()};
                 document.getElementById("Armin").onmouseout = function()                    {mouseOut()};

                function mouseOver() {
                document.getElementById("Armin").style.color = "red";
                 }

                function mouseOut() {
                document.getElementById("Armin").style.color = "black";
                 }
        </script>

   </body>
</html>

رویداد onkeydown

یکی از رویداد های بسیار کاربردی که در کیبورد اتفاق می افتد، رویداد onkeydown می باشد. این رویداد زمانی رخ می دهد که کاربر یکی از کلید های کیبورد خود را فشار دهد. برای مثال اگر کد زیر را در یک سند html استفاده کنید، هنگامی که در input ایجاد شده یکی از کلید های کیبورد را فشار دهید و یا چیزی بنویسید، رنگ آن قرمز می شود.


<html>
<body>

<p>برای مشاهده کاربرد این رویداد در کادر ایجاد شده چیزی بنویسید</p>

<input type="text" id="Armin">

<script>
document.getElementById("Armin").onkeydown = function() {myFunction()};

function myFunction() {
  document.getElementById("Armin").style.backgroundColor = "blue";
}
</script>

</body>
</html>

پیشنهاد می کنیم از صفحه تگ های معنا دار در html و تگ a در html نیز دیدن فرمایید.

رویداد onkeyup در جاوا اسکریپت

این رویداد برعکس onkeydown عمل می کند، به طوری که وقتی کاربر یک کلید را رها می کند، این رویداد نیز اتفاق می افتد. برای مثال در کد زیر، هنگامی که شما متنی را به انگلیسی و با حروف کوچک بنویسید، هنگامی که کلید کیبورد را رها کنید، حرف نوشته شده بزرگ می شود.


<html>
<body>


Enter your name: <input type="text" id="Armin">

<script>
document.getElementById("Armin").onkeyup = function() {myFunction()};

function myFunction() {
  var x = document.getElementById("Armin");
  x.value = x.value.toUpperCase();
}
</script>

</body>

رویداد onfocus در جاوا اسکریپت

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


<html>
<body>
Enter your name: <input type="text" id="Armin">

<script>
document.getElementById("fname").onfocus = function() {myFunction()};

function myFunction() {
  document.getElementById("fname").style.backgroundColor = "red";
}
</script>

</body>
</html>

کاربرد رویداد onblur

این رویداد در دسته رویداد های input قرار می گیرد و زمانی اتفاق می افتد که فوکوس ماوس از روی یک input برداشته می شود. به طور واضح تر اگر روی یک عنصر کلیک کنید onfocus و اگر خارج از آن تگ کلیک کنید، onblur رخ می دهد. استفاده از این رویداد نیز مانند سایر رویداد ها بوده و می توانید مطابق دیگر مثال ها، از این رویداد استفاده نمایید.

رویداد onchange در جاوا اسکریپت

رویداد onchange زمانی اتفاق می افتد که کاربر مقدار یک عنصر یا فرزند را تغییر می دهد. برای مثال در کد زیر، هنگامی که کاربر نام خود را به انگلیسی و با حروف کوچک وارد کند و پس از آن اینتر کند، نوشته آن به حروف بزرگ تغییر می کند.


<html>
<body>
نام خود را به انگلیسی وارد کنید: <input type="text" id="Armin">


<script>
document.getElementById("Armin").onchange = function() {myFunction()};

function myFunction() {
  var x = document.getElementById("Armin");
  x.value = x.value.toUpperCase();
}
</script>

</body>
</html>

رویداد onload در جاوا اسکریپت

این رویداد زمانی رخ می دهد که لودینگ صفحه وب برای کاربر تمام شده است و یک پیام صفحه لود شد برای کاربر ارسال می شود. برای مثال هنگامی که صفحه به طور کامل برای کاربر لود شد، یک پیام “صفحه به طور کامل لود شد” برای کاربر ارسال می شود. شما می توانید با مشاهده کد زیر، این رویداد را بهتر درک کنید.


<html>
<body>

<iframe id="Armin" src="/default.asp"></iframe>

<p id="Ali"></p>

<script>
document.getElementById("Armin").onload = function() {myFunction()};

function myFunction() {
  document.getElementById("Ali").innerHTML = "Iframe is loaded.";
}
</script>

</body>
</html>

رویداد onresize در جاوا اسکریپت

این رویداد زمانی اتفاق می افتد که کاربر اندازه صفحه خود را تغییر می دهد، برای مثال با استفاده از کد زیر می توانید نشان دهید که کاربر چند بار اندازه پنجره صفحه نمایش خود را کم یا زیاد کرده است.


<html>
<body>


<p>اندازه صفحه را تغییر دهید</p>

<p>سایز صفحه <span id="Armin">0</span> بار تغییر کرد</p>

<script>
document.getElementsByTagName("BODY")[0].onresize = function() {myFunction()};

var x = 0;
function myFunction() {
  var txt = x += 1;
  document.getElementById("Armin").innerHTML = txt;
}
</script>

</body>
</html>

کاربرد رویداد unmousedown و onmouseup

onmousedown زمانی اتفاق می افتد که یکی از کلید های ماوس خود را فشار داده و نگه دارید، اما رویداد onmouseup برعکس آن می باشد و هنگامی که کاربر کلید ماوس خود را رها می کند رخ می دهد. استفاده از این رویداد ها مانند دیگر رویداد ها می باشد و می توانید مطابق مثال های بالا کد آن را بنویسید.

کاربرد رویداد onmousemove

این رویداد زمانی رخ می دهد که ماوس روی عنصر مورد نظر حرکت کند. این رویداد نیز مانند سایر رویداد ها بوده و برای استفاده از این رویداد می توانید از مثال های بالا کمک بگیرید.

کاربرد رویداد onunload

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

امیدواریم که این مقاله برای شما کاربردی بوده باشد، همچنین به شما توصیه می کنیم برای آشنایی با فریم ورک های جاوا اسکریپت از صفحه مربوطع آن دیدن فرمایید.

سوالات متداول

event در جاوا اسکریپت چیست؟

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

تعریف event در جاوا اسکریپت به چه صورت است؟

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