جسٹا اسکریپٹ ایونٹ لیستنر

addEventListener() کا طریقہ کار

مثال

بٹن پر کلک کئے جانے پر رکھنے والا ایونٹ لیسٹنر شروع کریں:

document.getElementById("myBtn").addEventListener("click", displayDate);

خود کا تجربہ کریں

addEventListener() اس طریقے سے مخصوص عنصر کے لیے مخصوص ایونٹ ہینڈلر جوڑ سکتے ہیں。

addEventListener() اس طریقے سے عنصر کو ایونٹ ہینڈلر جوڑ سکتے ہیں، جس سے موجودہ ایونٹ ہینڈلرز پر اضافہ ہوگا اور ان کو اورپر نہیں نکال سکتے ہیں。

آپ ایک عنصر کو متعدد ایونٹ ہینڈلر اضافہ کرسکتے ہیں。

آپ کو کسی بھی علامت پر متعدد ایونٹ ہینڈلر جوڑ سکتے ہیں، جیسے دو "click" ایونٹ.

آپ کو کسی بھی DOM آئیٹم پر ایونٹ ہینڈلر جوڑ سکتے ہیں، نہ صرف HTML علامت، جیسے وینڈو آئیٹم:

addEventListener() کا استعمال کیا جاتا ہے، تو اس سے ایونٹ کو بولب کی جائزیداری پر کنٹرول کرنا آسان ہوتا ہے.

جب addEventListener() جب اس طریقے سے استعمال کیا جاتا ہے، جس سے جاویسکریپٹ اور HTML مرمت کا تفریق ہوتا ہے، جس سے پڑھنا آسان ہوتا ہے؛ جیسا کہ HTML مرمت کو کنٹرول نہ کیا جاتا ہو، بھی آپ کو ایونٹ لیستنر جوڑنا ممکن ہوتا ہے.

آپ کسی بھی DOM آئیٹم پر ایونٹ ہینڈلر جوڑ سکتے ہیں، نہ صرف HTML علامت، جیسے وینڈو آئیٹم: removeEventListener() اس طریقے سے ایونٹ لیستنر کو آسانی سے ختم کردیں.

گرامر

عنصر.addEventListener(ایونٹ, فنکشن, useCapture);

پہلا پارامتر وہ ایونٹ کی نوعیت ہوتا ہے (مثلاً "click" یا "mousedown"):

دوسرا پارامتر وہ فانکشن ہوتا ہے جس کو ایونٹ ہونے پر سرو کار کردیں:

تیسرا پارامتر بولین وارث ہوتا ہے، جو چوکیدار یا چوکیدار نہیں بننا کا فیصلہ کرتا ہے، اس پارامتر کو اختیاراً استعمال کیا جاسکتا ہے。

توجہ:ایونٹ پر "on" پرافیکس استعمال نہ کریں؛ استعمال کریں "click" بجائے "onclick".

ایک علامت پر ایونٹ ہینڈلر جوڑنا

مثال

کوئی بھی علامت پر کلک کرنے پر "Hello World!" پرنام:

عنصر.addEventListener("click", function(){ alert("Hello World!"); });

خود کا تجربہ کریں

آپ کسی بیرونی ‘نامزد’ فانکشن کو بھی استعمال کرسکتے ہیں:

مثال

کوئی بھی علامت پر کلک کرنے پر "Hello World!" پرنام:

عنصر.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

خود کا تجربہ کریں

ایک ہی علامت پر متعدد ایونٹ ہینڈلر جوڑنا

addEventListener() اس طریقے سے آپ کو کسی بھی علامت پر متعدد ایونٹوں کو جوڑنا ہوتا ہے، جس سے موجودہ ایونٹوں کو نہیں محو کردیں:

مثال

عنصر.addEventListener("click", myFunction);
عنصر.addEventListener("click", mySecondFunction);

خود کا تجربہ کریں

آپ کو ایک ہی علامت پر مختلف نوعیت کے ایونٹوں کو جوڑنا ہوتا ہے:

مثال

عنصر.addEventListener("mouseover", myFunction);
عنصر.addEventListener("click", mySecondFunction);
عنصر.addEventListener("mouseout", myThirdFunction);

خود کا تجربہ کریں

وینڈو آئیٹم پر ایونٹ ہینڈلر جوڑنا

addEventListener() آپ کو اجازت دیتی ہے کہ وینڈو لیستنر کو کسی بھی HTML DOM آئیٹم پر جوڑیں، جیسے HTML علامت، HTML آئیٹم، وینڈو آئیٹم یا کسی ایسے آئیٹم پر جو ایونٹوں کو پشتیبند کریں، جیسے xmlHttpRequest آئیٹم。

مثال

مستمعین کو چو کے وینڈو کی بڑائی بدل دیجائی، ایک ایونٹ لیستنر شروع کریں:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

خود کا تجربہ کریں

پارامٹر منتقلی

پارامٹر کی منتقلی کے لیے، فونکشن کا استعمال کرتے ہوئے نامزد فونکشن کا استعمال کریں:

مثال

عنصر.addEventListener("click", function(){ myFunction(p1, p2); });

خود کا تجربہ کریں

ایونٹ بولب ہوگا یا ایونٹ کپچر؟

HTML DOM میں دو طرح کا ایونٹ پروپاگیشن ہوتا ہے: بولب اور کپچر

ایونٹ پروپاگیشن، ایونٹ کی پیشکش کی وجہ سے علامت کی ترتیب کو ایک طریقہ بنا دیتا ہے۔ اگر <div> علامت کے اندر <p> علامت ہو، تو یہاں کاربر <p> علامت پر کلیک کرتا ہے، تو کس علامت کا کلیک ایونٹ کو پہلے ہینڈل کیا جائے؟

بولب میں، پیرا کی جانب کا سب سے اندرونی علامت کو پہلے ہینڈل کیا جائے گا، پھر دوسرے: پہلے <p> علامت کا کلیک ایونٹ ہینڈل کیا جائے گا، پھر <div> علامت کا کلیک ایونٹ ہینڈل کیا جائے گا。

کپچر میں، پیرا کی جانب کا سب سے باہری علامت کو پہلے ہینڈل کیا جائے گا، پھر دوسرے: پہلے <div> علامت کا کلیک ایونٹ ہینڈل کیا جائے گا، پھر <p> علامت کا کلیک ایونٹ ہینڈل کیا جائے گا。

addEventListener() میتھد میں، آپ "useCapture" پارامٹر کا استعمال کرکے پروپاگیشن کا نوعیت مقرر کرسکتے ہیں:

addEventListener(ایونٹ, فنکشن, useCapture);

مقصد سے false، تو بولب پروپاگیشن استعمال ہوگا، اگر اس کا مرتبہ true، تو ایونٹ کی کیپچر پروپاگیشن استعمال ہوگی

مثال

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

خود کا تجربہ کریں

removeEventListener() میتھد

removeEventListener() میتھد کو استعمال کرکے addEventListener() میتھد کا اضافی ایونٹ ہینڈلر:

مثال

عنصر.removeEventListener("mousemove", myFunction());

خود کا تجربہ کریں

براوزر کی پشتیبندیت

جداول میں دیکھی جانے والی شماریات، ان کے لئے پورا پشتیبندیت حاصل کرنے والی پہلی براوزر کی نسخہ کا تعین کرتی ہیں。

مетод
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

نوٹ:IE 8، Opera 6.0 اور ان کی اگلی نسخوں کو نہیں پشتیبندیت حاصل ہوتی ہے addEventListener() اور removeEventListener() مетод ۔ لیکن، ان خصوصی نسخوں کے لیے، آپ اس کو استعمال کرسکتے ہیں attachEvent() مетод، عناصر کو ایونٹ ہینڈلر جوڑتا ہے، اور ساتھ ہی detachEvent() مетод حذف:

عنصر.attachEvent(ایونٹ, فنکشن);
عنصر.detachEvent(ایونٹ, فنکشن);

مثال

کros برووزر حل

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // برائے معروف براؤزر، ای ای 8 اور اس سے پچھلے ورژن کے علاوہ
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // برائے ای ای 8 اور اس سے پچھلے ورژن
    x.attachEvent("onclick", myFunction);
}

خود کا تجربہ کریں

ایچ تی ایم ال ڈی او ایم ایونٹ اوبجیکٹ مرجع

تمام ایچ تی ایم ال ڈی او ایم ایونٹ کی فہرست کے لئے، ہماری پورے مرجع کا دورہ کریں ایچ تی ایم ال ڈی او ایم ایونٹ اوبجیکٹ مرجع。