event هم یک موجودیت در ساختار dom می باشد که به ازای هر HTML Object یک سری Attribute یا ویژگی خواهیم داشت که یکی از آن ها Event های موجود در آن HTML Object می باشد.

به ازای اجرا (trigger) یک Javascript Event بر روی یک HTML Object سیستم نسبت به اجرا (trigger) شدن این event یک React یا عکس العمل نشان می دهد. این عکس العمل باید در حافظه RAM مرورگر تعبیه گردد.

Event Concept

در رابطه با یک Event ما سه مفهوم داریم که در یک پروسه اجرای واقعه تا مدیریت آن (event trigger on object and handle – React) دخیل هستند:

• HTML Object : این همان شئ است که واقعه اختصاصی ویژگی آن است . در ساختار Dom می تواند یک Tag باشد.
• Event : این همان واقعه است که ویژگی از آن Object می باشد.به طور مثال لود شدن یک سند یک واقعه است روی Document .
• Event Trigger : این همان کنشی است که روی این Object اجرا می گردد.این اجرا – trigger – به این شکل است که می تواند توسط ورودی های کاربر اتفاق بیفتد و یا تکمیل عملیات توسط مرورگر باشد.
• Event Listener (React) : به ازای این کنش یک واکنش – React – خواهیم داشت که احتمالا شئ واقعه هم به عنوان هدف دخیل خواهد بود.

Event یک مفهوم است که در ساختار پردازش های یک برنامه امکان وقوع آن می باشد . به این شکل که به طور مثال در یک عملیات روی شئ کاربر اجرای واقعه ثبت نام و در پیرو آن اجرای یک action به عنوان عکس العملی برای این واقعه می باشد. یا در ساختار پردازش برنامه دریافت کامل درخواست در یک پروسه می تواند یک واقعه از این پردازش باشد.

پس Event می تواند به ازای کنش یک client باشد یا در خلال اجرای یک پردازش اتفاق بیفتد که این مدیریت Event اجرا شده را React یا واکنش می گوییم.

Event Register

برای قرار دادن یک واقعه و واکنش آن در یک HTML Object سه روش وجود دارد. به طور مثال واقعه click را برای یک HTML Element به سه روش ایجاد می کنیم.

in HTML

<element onclick="myScript">

in JavaScript

object.onclick = function(){myScript};

in JavaScript addEventListener Attribute

object.addEventListener("click", myScript);

عبارت myscript می تواند یک رشته statement باشد که چه در قالب یک تابع اعمال گردد و چه در قالب یک statement پشت سر هم . به طور مثال :

<button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>

<h3 onclick="myFunction(this, 'red')">Click me to change my color.</h3>

<script>
function myFunction(element, color) {
  element.style.color = color;
}
</script>

در مثال بالا action که قرار است این واقعه روی HTML Object را مدیریت کند Event Listener است یا همان واکنش یا React نسبت به این Event.

Event Listener

درزمان register یک action برای مدیریت یک Event می توان یک سری پارامتر را برای این action قرار داد . دقیقا مشابه زمانی که یک قلاب را در وردپرس قرار می دادیم.

do_action('user_registration_complate',$user,$request_body,'red');

در موقعیت مشابه جاوا اسکریپت نیز می توان این قابلیت را داشت . در زمانی که یک واقعه در قالب یک attribute روی یک شئ اجرا می گردد دسترسی به شئ واقعه اجرا شده و خود شئ داریم و حتی می توانیم یک سری پارامتر شخصی نیز به آن ارسال کنیم.

<h3 onclick="myFunction(this, event,'red')">Click</h3>
function myFunction(element, event, color) {
  console.log(element,event)
}

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

<button onclick="validateAction(event)" data-name="hilton" >remove</button>
var validateAction = function(e){
    let validateKey = e.target.getAttribute('data-name')
    let requestKey = prompt('Enter current entity name')
    if(validateKey != requestKey){
        alert('invalid name , the correct name is: ' + validateKey)
        return e.preventDefault()
    }
}

Event Object

این شئ event است که در html objects وجود دارد . این شئ یک سری ویژگی – attribute – دارد . این ویژگی ها در خلال مدیریت event قابل استفاده هستند. سه دسته از مهم ترین attribute ها و method های این شئ را بررسی می کنیم:

• currentTarget,target
• preventDefault,DefaultPrevented
• stopPropagation,stopImmediatePropagation

همان طور که واضح است زمانی که روی یک element یک event مثلا click اجرا می گردد می توان گفت که روی element های فرزند نیز این event اجرا شده است . به طور مثال فرض کنید section > button اگر event روی section ثبت شده باشد و روی button کلیک کنید عملا event اجرا شده است .در این زمان در handler برای دریافت کردن element مورد نظر در مواقع مختلف می توان از ویژگی های زیر استفاده کرد.

در مثال زیر این حالت والد و فرزندی در این دو ویژگی مورد بررسی قرار گرفته است .

<section onclick="func(event)">
   <button>click</button> <!--clicked-->
</section>
<script>
func(event){
   console.log(event.target) //button
   console.log(event.currentTarget) //section
</script>

ممکن است رفتار هر html object به ازای اجرای یک event روی آن به شکلی باشد که خود آن یک Handler توسط مرورگر داشته باشد پیش از این که ما handler برای آن register کنیم. به این شکل که مثلا تگ anchor یک لینک را دنبال می کند. برای این که از این رفتار پیش فرض جلوگیری کنیم می توانیم از تابع preventDefault() که از متد های پیش فرض event است.

در مثال زیر ما از باز شدن لینک جلوگیری می کنیم.

<button onclick="validateAction(event)" data-name="hilton" >remove</button>
var validateAction = function(e){
    e.preventDefault()
    alert('clicked')
}

برای مدیریت تداخل Listener ها لازم است که ما در مواقع مورد نیاز از متد های خاص استفاده کنیم. به این شکل که اگر در ازای حالت والد و فرزندی (stopPropagation) یا حالتی که یک سری کد های خاص با addEventListener روی یک html object یک سری Listener ثبت کرده باشند با این متد ها از این حالت جلوگیری کنیم.

<section onclick="func(event)">
   <button onclick="func2(event)">click</button> <!--clicked-->
</section>
<script>
func(event){
   console.log(event.target)
}
func2(event){
   console.log(event.target)
   event.stopPropagation()
}
</script>

در مثال بالا func اجرا نمی گردد چون در زمان اجرای func2 ما از اجرای Listener های والد با متد stopPropagation جلوگیری می کنیم.

var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);

function myFunction(event) {
  alert ("Hello World!");
  event.stopImmediatePropagation();
}

// This function will not be executed
function someOtherFunction() {
  alert ("I will not get to say Hello World");
}

در مثال بالا تابع های همگام با هم اجرا نمی گردد چرا که با stopImmediatePropagation از اجرای همزمان این Listener ها جلوگیری خواهیم کرد.

Event Type

مهم ترین آن type است که بر اساس نوع event می تواند متفاوت باشد . انواع مختلف event می توان به مواردی چون event از نوع click یا event از نوع keyup یا event از نوع submit … اشاره کرد.

<body
  onmousedown="myFunction(event)"
  onmouseup="myFunction(event)"
  onkeydown="myFunction(event)"
  onkeyup="myFunction(event)">

<script>
myFunction(event){
   console.log(event.type);
}
</script>

یک سری از event ها مربوط به ورودی های کاربر است . به طور مثال Mouse , Keyboard

• Mouse
  • onClick
  • onContextMenu : زمانی که راست کلیک کنید.
  • onMouseDown : کلیک موس فشرده می شود.
  • onMouseUp : زمانی که کلیک موس به بالا می آید ( پس از فشرده شدن )
  • onMouseEnter : زمانی که موس به محدوده المنت وارد شد.
  • onMouseOut : زمانی که موس از محدوده المنت خارج شد.
  • onMouseOver : زمانی که موس روی المنت قرار گرفت.
• Keyboard
  • onKeyDown
  • onKeyPress
  • onKeyUp

یک دسته از event ها مربوط به زمانی است که focus روی یک html object اتفاق می افتد. به طور مثال زمانی که یک input فعال برای نوشتن است .

• Focus
  • onBlur : زمانی که خارج از المنت اتفاقی می افتد ( از حالت فوکوس روی یک input خارج می شویم )
  • onFocus :‌ زمانی که روی المنت اتفاقی می افتد ( فوکوس کردن روی یک input )

یک دسته دیگر از event ها مربوط به clipboard است

یک دسته دیگر از event ها مربوط است به عملیات Touch

یک دسته از event ها به صورت اختصاصی مربوط به ماهیت یک html element است . به طور مثال در رابطه با تگ Form :

• Form
  • onChange : زمانی که یکی از ورودی ها توسط کاربر تغییر می کند.
  • onSubmit : در زمان تایید یک فرم.

در این منبع می توانید از منوی سمت چپ صفحه لیست Event ها را به ترتیب بررسی کنید و مثال های هر کدام را نیز مشاهده کنید. تنها Event ها در این سند وجود ندارد بلکه برخی توابع اختصاصی برای هر یک از Element ها نیز در این ساختار قابل مشاهده است و به طور مثال می توان متد اختصاصی submit را نیز برای Form مشاهده کنید.

Attach Event on Dynamic Elements

زمانی که با addEventListener روی html element های مختلف ما یک سری handler های خاص را register می کنیم در صورتی که در همان زمان اجرای پردازش ما آن html element وجود داشت این register به درستی اتفاق می افتد و در صورتی که وجود نداشته باشد این register اتفاق نمی افتد .

برای مدیریت این اتفاق ما می توانیم به ازای لود html element های جدید این تابع را مجددا اجرا کنیم یا این که یک لایه بالاتر والد را در نظر بگیریم و در صورتی که روی والد event اتفاق افتاد بر اساس target بررسی کنیم که آیا html element ما event روی آن اتفاق افتاده است یا خیر :

var removeImageFrame = (event) => {
    if(false == event.target.classList.contains('close')){
        return
    }
    //do something
}

در مثال بالا ما eventListener را روی یک html element که همیشه وجود دارد register می کنیم و در صورتی که روی آن event اجرا شد بررسی می کنیم که target مربوطه کلاس خاص ما را دارد یا خیر بعد اگر داشت یعنی باید بدنه اصلی Listener را به اجرا در آوریم. //dosomething

jQuery این روش را به شکل ساده تری مدیریت می کند :

$(document).on('click','.close',function(){//do something})

DispatchEvent

اگر قرار باشد به ازای یک حالت خاص ما یک event را trigger کنیم مثلا یک تایمر قرار در حال کم شدن است و به ازای رسیدن به عدد 0 باید این event اجرا شود و متدهایی که به این Event متصل است اجرا گردد. باید مطابق با روال زیر عمل کنیم:

– ابتدا باید این Event را تعریف کنیم.

let event = new Event('counter-ended')

در نقطه ای که مد نظر شماست این event اجرا گردد باید متد زیر را اجرا کنید. به طور مثال در همان تایمر معکوس برابر است با جایگاه همان متدی که عدد تایمر را مدیریت می کرد و زمانی که عدد برابر صفر شد باید این واقعه اجرا گردد:

document.dispatchEvent(event)

طبیعتا باید event را در یک متغیری قرار بدهید که در هر دو نقطه قابل دستیابی باشد. مثلا اگر در کلاس است در یک Property قرار بدهید.