DOM
आयोजन

पैरामीटर

टिप्पणियों

परिचय

परिभाषा:

कंप्यूटिंग में, एक घटना सॉफ्टवेयर द्वारा मान्यता प्राप्त एक क्रिया या घटना है जिसे सॉफ्टवेयर द्वारा नियंत्रित किया जा सकता है। कंप्यूटर की घटनाओं को सिस्टम द्वारा या उपयोगकर्ता द्वारा या अन्य तरीकों से उत्पन्न या ट्रिगर किया जा सकता है। परिभाषा स्रोत

HTML ईवेंट "चीजें" हैं जो HTML तत्वों के साथ होती हैं। जावास्क्रिप्ट इन घटनाओं पर "प्रतिक्रिया" कर सकता है। Event Listeners माध्यम से। साथ ही, कस्टम घटनाओं का उपयोग कर शुरू किया जा सकता dispatchEvent । लेकिन यह केवल एक परिचय है, तो चलिए शुरू करते हैं!

मूल घटना श्रोता

घटनाओं को सुनने के लिए, आप target.addEventListener(type, listener); कॉल target.addEventListener(type, listener);

function loadImage() {
  console.log('image code here!');
}
var myButton = document.querySelector('#my-button');
myButton.addEventListener('click', loadImage);

जब भी my-button क्लिक किया जाएगा, यह लोडआईमैज को ट्रिगर करेगा।

ईवेंट ट्री में श्रोताओं को किसी भी नोड से जोड़ा जा सकता है। ब्राउज़र में मूल रूप से ट्रिगर की गई सभी घटनाओं की पूरी सूची देखने के लिए: पूर्ण इवेंट सूची के लिए एमडीएन लिंक यहां जाएं

ईवेंट श्रोताओं को हटाना

RemoveEventListener () विधि इवेंट हैंडलर को हटाती है जिसे addEventListener () विधि के साथ जोड़ा गया है:

element.removeEventListener("mousemove", myFunction);

RemoveEventListener में सब कुछ (eventname, function, और options) तत्व के लिए इवेंट श्रोता को जोड़ते समय एक सेट से मेल removeEventListener चाहिए।

.Lind के साथ निकालेंलिस्टनर

फंक्शन पर .bind का उपयोग करते समय इवेंट श्रोता को जोड़ने से फंक्शन को हटाए जाने से रोका जा सकता है, वास्तव में ईवेंट लिस्टनर को हटा सकते हैं:

function onEvent() {
   console.log(this.name);
}

var bindingOnEvent = onEvent.bind(this);

document.addEventListener('click', bindingOnEvent);

...

document.removeEventListener('click', bindingOnEvent);

किसी घटना को केवल एक बार सुनें

जब तक once विकल्प का व्यापक रूप से समर्थन नहीं किया जाता है, तब तक हमें पहली बार ईवेंट को ट्रिगर होने के बाद भी श्रोता को मैन्युअल रूप से निकालना होगा।

यह छोटा सहायक हमें इसे हासिल करने में मदद करेगा:

Object.prototype.listenOnce = Object.prototype.listenOnce ||
  function listenOnce(eventName, eventHandler, options) {
      var target = this;
      target.addEventListener(eventName, function(e) {
          eventHandler(e);
          target.removeEventListener(eventName, eventHandler, options);
      }, options);
  }

var target = document.querySelector('#parent');
target.listenOnce("click", clickFunction, false);

* ऑब्जेक्ट प्रोटोटाइप के लिए फ़ंक्शंस संलग्न करना सबसे अच्छा अभ्यास नहीं है, इसलिए आप इस कोड की पहली पंक्ति को हटा सकते हैं और इसे पहले परम के रूप में एक लक्ष्य जोड़ सकते हैं।

दस्तावेज़ को लोड करने के लिए प्रतीक्षा कर रहा है

सबसे अधिक इस्तेमाल की जाने वाली घटनाओं में से एक दस्तावेज़ के लोड होने की प्रतीक्षा कर रही है, जिसमें स्क्रिप्ट फाइलें और चित्र दोनों शामिल हैं। document पर load ईवेंट का उपयोग इसके लिए किया जाता है।

document.addEventListener('load', function() {
   console.log("Everything has now loaded!");
});

कभी-कभी आप किसी DOM ऑब्जेक्ट को लोड होने से पहले एक्सेस करने का प्रयास करते हैं, जिससे अशक्त बिंदु उत्पन्न होते हैं। ये वास्तव में डिबग करने के लिए कठिन हैं। इसके बजाय इस उपयोग document के DOMContentLoaded घटना से बचने के लिए। DOMContentLoaded सुनिश्चित करती है कि HTML सामग्री को अन्य बाहरी संसाधनों की प्रतीक्षा किए बिना लोड किया गया और आरंभ किया गया है।

document.addEventListener('DOMContentLoaded', function() {
   console.log("The document contents are now available!");
});

घटना वस्तु

ईवेंट ऑब्जेक्ट तक पहुँचने के लिए, ईवेंट श्रोता कॉलबैक फ़ंक्शन में event पैरामीटर शामिल करें:

var foo = document.getElementById("foo");
foo.addEventListener("click", onClick);

function onClick(event) {
  // the `event` parameter is the event object
  // e.g. `event.type` would be "click" in this case
};

e.stopPropagation ();

HTML:

<div id="parent">
   <div id="child"></div>
</div>

जावास्क्रिप्ट:

var parent = document.querySelector('#parent');
var child = document.querySelector('#child');

child.addEventListener('click', function(e) {
   e.stopPropagation();
   alert('child clicked!');
});

parent.addEventListener('click', function(e) {
   alert('parent clicked!');
});

चूंकि बच्चा घटना के प्रसार को रोकता है, और घटनाओं को बुदबुदाने के चरण के दौरान सुना जाता है, बच्चे पर क्लिक करने से बच्चे को केवल ट्रिगर किया जाएगा। प्रचार बंद किए बिना दोनों घटनाओं को ट्रिगर किया जाएगा।

e.preventDefault ();

event.preventDefault() विधि किसी तत्व की डिफ़ॉल्ट क्रिया को होने से रोकती है।

उदाहरण के लिए:

• फॉर्म सबमिट करने से सबमिट बटन रोकें
• URL का अनुसरण करने से एक लिंक रोकें

var allAnchorTags = document.querySelector('a');

allAnchorTags.addEventListener('click', function(e){
    e.preventDefault();
    console.log('anchor tags are useless now! *evil laugh*');
});

e.target बनाम e.currentTarget

e.currentTarget ईवेंट के लिए वर्तमान लक्ष्य को पहचानता है, क्योंकि ईवेंट DOM को ट्रेस करता है। यह हमेशा उस तत्व को संदर्भित करता है जो ईवेंट हैंडलर को ईवेंट के विपरीत संलग्न किया गया है। जो उस ईवेंट को पहचानता है जिस पर ईवेंट हुआ था।

दूसरे शब्दों में

e.target उस घटना को लौटाएगा जो ट्रिगर करने के लिए ईवेंट डिस्पैचर को ट्रिगर करती है

e.currentTarget आपको वह श्रोता देगा जिसे आपने अपना श्रोता सौंपा था।

HTML:

<body>
   <button id="my-button"></button>
</body>

जावास्क्रिप्ट:

var body = document.body;
body.addEventListener( 'click', function(e) {
    console.log('e.target', e.target);
    console.log('e.currentTarget', e.currentTarget);
});

यदि आप my-button ,

• e.target my-button
• e.currentTarget हो जाएगा body

इवेंट बबलिंग और कैप्चरिंग

DOM तत्वों पर निकाल दी गई घटनाएँ केवल उस तत्व को प्रभावित नहीं करती हैं जिसे वे लक्षित कर रहे हैं। DOM में लक्ष्य के पूर्वजों में से किसी को भी घटना पर प्रतिक्रिया करने का मौका मिल सकता है। निम्नलिखित दस्तावेज़ पर विचार करें:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
  <p id="paragraph">
    <span id="text">Hello World</span>
  </p>
</body>
</html>

यदि हम बिना किसी विकल्प के सिर्फ प्रत्येक तत्व के श्रोताओं को जोड़ते हैं, तो स्पैन पर एक क्लिक करें ...

document.body.addEventListener('click', function(event) {
  console.log("Body clicked!");
});
window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph clicked!");
});
window.text.addEventListener('click', function(event) {
  console.log("Text clicked!");
});

window.text.click();

... तो घटना के प्रत्येक पूर्वज के माध्यम से बुलबुला होगा, रास्ते पर प्रत्येक क्लिक हैंडलर ट्रिगर:

Text clicked!
Paragraph clicked!
Body clicked!

यदि आप चाहते हैं कि आपका कोई हैंडलर इवेंट को किसी भी अधिक हैंडलर को ट्रिगर करने से रोके, तो इसे इवेंट. event.stopPropagation() विधि कह सकते हैं। उदाहरण के लिए, यदि हम अपने दूसरे ईवेंट हैंडलर को इससे प्रतिस्थापित करते हैं:

window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph clicked, and that's it!");
  event.stopPropagation();
});

हम निम्न आउटपुट देखेंगे, जिसमें body click हैंडलर कभी ट्रिगर नहीं होगा:

Text clicked!
Paragraph clicked, and that's it!

अंत में, हमारे पास ईवेंट श्रोताओं को जोड़ने का विकल्प है जो बुदबुदाती के बजाय " कैप्चर " के दौरान ट्रिगर करते हैं। एक घटना से पहले उसके पूर्वजों के माध्यम से एक तत्व से बुलबुले उठते हैं, यह पहले अपने पूर्वजों के माध्यम से तत्व को "कैप्चर" करता है। addEventListener को वैकल्पिक तीसरे तर्क के रूप में एक कैप्चर करने वाले श्रोता को true या {capture: true} निर्दिष्ट करके जोड़ा जाता है। यदि हम उपरोक्त श्रोताओं को अपने पहले उदाहरण में जोड़ते हैं:

document.body.addEventListener('click', function(event) {
  console.log("Body click captured!");
}, true);
window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph click captured!");
}, true);
window.text.addEventListener('click', function(event) {
  console.log("Text click captured!");
}, true);

हम निम्नलिखित उत्पादन प्राप्त करेंगे:

Body click captured!
Paragraph click captured!
Text click captured!
Text clicked!
Paragraph clicked!
Body clicked!

डिफॉल्ट ईवेंट्स को बबलिंग चरण में सुना जाता है। इसे बदलने के लिए आप यह निर्दिष्ट कर सकते हैं कि कौन सा चरण किस इवेंट में addEventListener फ़ंक्शन में तीसरे पैरामीटर को निर्दिष्ट करके सुनता है। (कैप्चरिंग और बबलिंग के बारे में जानने के लिए, टिप्पणियों की जाँच करें)

element.addEventListener(eventName, eventHandler, useCapture)

useCapture: true मतलब यह true कि जब ईवेंट डोम ट्री के नीचे जा रहा हो तो सुनें। false मतलब है कि उस घटना को सुनें, जबकि वह डोम ट्री के ऊपर जा रही है।

window.addEventListener("click", function(){alert('1: on bubble')}, false);
window.addEventListener("click", function(){alert('2: on capture')}, true);

इस क्रम में अलर्ट बॉक्स पॉप अप होंगे:

• 2: कैद पर
• 1: बुलबुला पर

वास्तविक-विश्व उपयोग के मामले

बबल इवेंट से पहले कैप्चर इवेंट प्रेषण किया जाएगा, इसलिए यदि आप अपने कैप्चर चरण में इसे सुनते हैं तो आप किसी घटना को सुन सकते हैं।

यदि आप एक मूल तत्व पर क्लिक करने की घटना सुन रहे हैं, और दूसरा उसके बच्चे पर, तो आप पहले बच्चे या माता-पिता की बात सुन सकते हैं, यह इस बात पर निर्भर करता है कि आप किस तरह से उपयोग के पैरामीटर को बदलते हैं।

बुदबुदाती में, बच्चे की घटना को पहले बुलाया जाता है, कैप्चर में, पहले माता-पिता

HTML:

<div id="parent">
   <div id="child"></div>
</div>

जावास्क्रिप्ट:

child.addEventListener('click', function(e) {
   alert('child clicked!');
});

parent.addEventListener('click', function(e) {
   alert('parent clicked!');
}, true);

माता-पिता के इवेंट में सही सेट करना सबसे पहले पैरेंट श्रोता को ट्रिगर करेगा।

E.stopPropagation () के साथ संयुक्त होने पर आप इवेंट को चाइल्ड इवेंट श्रोता / या माता-पिता को ट्रिगर करने से रोक सकते हैं। (इसके बारे में अगले उदाहरण में)

इवेंट डेलिगेशन

इवेंट डेलिगेशन एक ऐसी प्रक्रिया है जो हमें विशिष्ट श्रोताओं के लिए इवेंट श्रोताओं को जोड़ने से बचने की अनुमति देती है; इसके बजाय, इवेंट श्रोता को मूल नोड में जोड़ा जाता है। यह तंत्र उस तत्व का उपयोग करने के बजाय DOM में एक उच्च स्तर के तत्व / नोड पर किसी ईवेंट को संभालने के लिए ईवेंट प्रचार / बुदबुदाहट का उपयोग करता है, जिस पर ईवेंट की उत्पत्ति हुई थी। उदाहरण के लिए, सोचें कि हमें निम्नलिखित सूची तत्वों के लिए घटनाओं को जोड़ने की आवश्यकता है:

<ul id="container">
    <li id="item-1" class="new">Item 1</li>
    <li id="item-2">Item 2</li>
    <li id="item-3">Item 3</li>
</ul>

हमें click हैंडलर्स और मूल रूप से जोड़ने की आवश्यकता है, हम श्रोताओं को लूप का उपयोग करके प्रत्येक तत्व में जोड़ सकते हैं लेकिन कल्पना करें कि, हम तत्वों को गतिशील रूप से जोड़ना चाहते हैं। इसलिए, हम DOM के लोड होने पर सभी घटना संचालकों को पंजीकृत करते हैं और DOM के बाद प्रत्येक तत्व के लिए सभी घटना संचालकों को इनिशियलाइज़ करता है और रजिस्टर करता है, उपरोक्त UL में नया डाला गया तत्व क्लिक पर कोई प्रतिक्रिया नहीं देगा क्योंकि वह तत्व DOM में मौजूद नहीं था जब हमने क्लिक ईवेंट श्रोताओं को पंजीकृत किया है।

इसलिए, इस समस्या को दूर करने के लिए, हम ईवेंट प्रतिनिधिमंडल का लाभ उठा सकते हैं। जिसका अर्थ है, बजाय प्रत्येक के लिए श्रोताओं के पंजीकरण की li खुद को तत्व है, हम इसे के माता-पिता को घटना श्रोता बाध्य कर सकते हैं UL उदाहरण के लिए तत्व:

document.getElementById("container").addEventListener("click", function(e) {
    console.log("List item " e.target.id, " was clicked!");
});

चूंकि, घटना डिफ़ॉल्ट रूप से (बुलबुले ऊपर की ओर) फैलती है, फिर किसी LI तत्व पर क्लिक करने से UL तत्व भी उसी घटना को आग लगा देगा। इस स्थिति में, हम फ़ंक्शन में e पैरामीटर का उपयोग कर सकते हैं, जो वास्तव में ईवेंट ऑब्जेक्ट है और यह मूल तत्व सहित ईवेंट के बारे में उपयोगी जानकारी प्रदान करता है, जिसने इवेंट शुरू किया। इसलिए, उदाहरण के लिए, हम निम्नलिखित जैसे कुछ का उपयोग कर सकते हैं:

document.getElementById("container").addEventListener("click", function(e) {

    // If UL itself then no action is require
    if(e.target.nodeName == 'UL') return false;

    if(e.target.classList.contains('new')) {
        console.log("List item " e.target.id, " was clicked and it's new!");
    }
});

तो, यह स्पष्ट है कि, e (ईवेंट ऑब्जेक्ट) हमें स्रोत तत्व (e.target) की जांच करने की अनुमति देता है और हम DOM लोड होने के बाद UL नए तत्वों को आसानी से इंजेक्ट कर सकते हैं और केवल एक प्रत्यायित ईवेंट हैंडलर ही सभी क्लिक ईवेंट को हैंडल करेगा माता-पिता UL भीतर जो कम मेमोरी खपत वाला है क्योंकि हमने सभी तत्वों के लिए केवल एक फ़ंक्शन घोषित किया है।

कस्टम घटनाओं को ट्रिगर करना

CustomEvent API डेवलपर्स को कस्टम इवेंट बनाने और उन्हें DOM नोड्स पर ट्रिगर करने की अनुमति देता है, जिस तरह से डेटा गुजर रहा है।

event = new CustomEvent(typeArg, customEventInit);

typeArg - DOMString ईवेंट के नाम का प्रतिनिधित्व करता है।

customEventInit - वैकल्पिक पैरामीटर है (जो निम्नलिखित उदाहरण में e रूप में पारित किया जाएगा)।

आप eventListeners को document या किसी भी HTML तत्व में संलग्न कर सकते हैं।

एक बार जब कस्टम ईवेंट जोड़ दिया गया है और तत्व (या दस्तावेज़) के लिए बाध्य है, तो कोई इसे मैन्युअल रूप से जावास्क्रिप्ट से फायर करना चाह सकता है।

document.addEventListener("event-name", function(e) {
  console.log(e.detail); // logs custom object passed from the event.
});

var event = new CustomEvent("event-name", { "param-name": "param-value" });
document.dispatchEvent(event);