जावास्क्रिप्ट वर्ग पर घटना श्रोता क्लिक करें

Question

मैं वर्तमान में क्लिक किए गए वर्ग की विशेषता प्राप्त करने के लिए कुछ जावास्क्रिप्ट लिखने की कोशिश कर रहा हूं। मुझे पता है कि इसे सही तरीके से करने के लिए, मुझे एक इवेंट श्रोता का उपयोग करना चाहिए। मेरा कोड इस प्रकार है:

var classname = document.getElementsByClassName("classname");

var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

classname.addEventListener('click', myFunction(), false);

मुझे हर बार एक अलर्ट बॉक्स मिलने की उम्मीद थी, जो मुझे विशेषता बताने के लिए कक्षाओं में से एक पर क्लिक किया लेकिन दुर्भाग्य से यह काम नहीं करता है। क्या कोई कृपया मदद कर सकता है?

( नोट - मैं इसे आसानी से कर सकता हूं jQueryलेकिन मैं इसका उपयोग नहीं करना चाहूंगा )

Comments

कोड के साथ एक समस्या है जो ईवेंट श्रोता को जोड़ रही है। addEventListener ईवेंट का नाम ('क्लिक') लेता है, फ़ंक्शन का संदर्भ (फ़ंक्शन का परिणाम नहीं है क्योंकि यह अब myFunction () को परेंस के साथ कॉल करके) और ईवेंट बबलिंग को इंगित करने के लिए एक ध्वज है। AddEventListener कॉल को ऐसा दिखना चाहिए: elem.addEventListener ('क्लिक', myFunction, गलत) और क्लासनाम एक NodeList प्रकार है। सभी तत्वों पर लूप करने की आवश्यकता है और सूची में प्रत्येक को श्रोता संलग्न करें।

— जोए गुएरा

Answer 1

यह काम करना चाहिए। getElementsByClassNameएक रिटर्न सरणी सरणी जैसी वस्तु मापदंड से मेल खाने तत्वों की (देखें संपादित करें)।

var elements = document.getElementsByClassName("classname");

var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
}

jQuery आपके लिए लूपिंग पार्ट करता है, जिसे आपको सादे जावास्क्रिप्ट में करने की आवश्यकता होती है।

यदि आपके पास ES6 समर्थन है, तो आप अपनी अंतिम पंक्ति को बदल सकते हैं:

    Array.from(elements).forEach(function(element) {
      element.addEventListener('click', myFunction);
    });

नोट: पुराने ब्राउज़र (जैसे IE6, IE7, IE8) समर्थन नहीं करते हैं getElementsByClassNameऔर इसलिए वे वापस लौट आते हैं undefined।

---

संपादित करें: सुधार

getElementsByClassNameएक सरणी नहीं लौटाता है, लेकिन अधिकांश में HTMLCollection, या कुछ ब्राउज़रों ( मोज़िला रेफरी ) में एक नोडलिस्ट । ये दोनों प्रकार एरे-लाइक हैं, (जिसका अर्थ है कि उनके पास एक लंबी संपत्ति है और वस्तुओं को उनके सूचकांक के माध्यम से एक्सेस किया जा सकता है), लेकिन सख्ती से एक ऐरे या विरासत से प्राप्त नहीं होते हैं। (अर्थ यह है कि अन्य विधियाँ जो एक ऐरे पर की जा सकती हैं, इन प्रकारों पर नहीं की जा सकती हैं)

उपयोगकर्ता @ निमो को इस ओर इशारा करने और मुझे पूरी तरह समझने के लिए खुदाई करने के लिए धन्यवाद ।

Comments

यह पूरी तरह से काम करता है। धन्यवाद। मैं वास्तव में पता नहीं था कि jQuery लूपिंग किया था। अनुदीप की बड़ी मदद की। यहां आपका काम करने का जवाब है: jsfiddle.net/LWda3/2

— 30secondstosam

document.getElementsByClassNameवास्तव में हमेशा एक सरणी लौटाते हैं, भले ही केवल एक तत्व मानदंड से मेल खाता हो

— गुइलहर्मे सेहान

सावधान हालांकि सरणी का पहला तत्व सभी डोम तत्व है। तो 1 के साथ अपने पाश के लिए शुरू करें

— विशाल सकारिया

stackoverflow.com/a/13258908/1333493 "document.getElementsByClassName एक सरणी नहीं लौटाता है। यह एक नोड सूची देता है जो XML फ़ाइल की तरह ट्रैवर्स की गई है।"

— निमो

Array.from()एक दूसरा पैरामीटर है जो एक मानचित्र फ़ंक्शन है इसलिए ऊपर (es6 समर्थन मानकर) लिखा जा सकता है Array.from(classname, c => c.addEventListener('click', myFunction));।

— १०:३४

Answer 2

* यह लक्ष्य वर्ग के बच्चों को घटनाओं को ट्रिगर करने के लिए अनुमति देने के लिए संपादित किया गया था। विवरण के लिए नीचे उत्तर देखें। *

एक इवेंट श्रोता को एक वर्ग में जोड़ने के लिए एक वैकल्पिक उत्तर जहां आइटम अक्सर जोड़े और निकाले जा रहे हैं। यह jQuery के onफ़ंक्शन से प्रेरित है जहां आप एक बच्चे तत्व के लिए चयनकर्ता में पारित कर सकते हैं जो घटना सुन रहा है।

var base = document.querySelector('#base'); // the container for the variable content
var selector = '.card'; // any css selector for children

base.addEventListener('click', function(event) {
  // find the closest parent of the event target that
  // matches the selector
  var closest = event.target.closest(selector);
  if (closest && base.contains(closest)) {
    // handle class event
  }
});

फिडल: https://jsfiddle.net/u6oje7af/94/

यह baseतत्व के बच्चों के लिए क्लिकों के लिए सुनेगा और अगर किसी क्लिक के लक्ष्य का चयनकर्ता से मेल खाने वाला कोई अभिभावक करता है, तो क्लास ईवेंट को संभाल लिया जाएगा। आप तत्वों को जोड़ सकते हैं और हटा सकते हैं जैसे कि आप व्यक्तिगत तत्वों में अधिक क्लिक श्रोताओं को जोड़ना चाहते हैं। इस श्रोता के जुड़ने के बाद जोड़े गए तत्वों के लिए भी यह उन सभी को पकड़ लेगा, जैसे कि jQuery की कार्यक्षमता (जो मुझे लगता है कि हुड के नीचे कुछ समान है)।

यह प्रचार करने वाली घटनाओं पर निर्भर करता है, इसलिए यदि आप stopPropagationकहीं और घटना पर हैं , तो यह काम नहीं कर सकता है। इसके अलावा, closestफ़ंक्शन में IE के साथ कुछ संगतता मुद्दे हैं (स्पष्ट रूप से क्या नहीं?)।

इसे एक फंक्शन में बनाया जा सकता है, यदि आपको इस प्रकार की क्रिया को बार-बार सुनने की आवश्यकता हो, जैसे

function addChildEventListener(base, eventName, selector, handler) {
  base.addEventListener(eventName, function(event) {
    var closest = event.target.closest(selector);
    if (closest && base.contains(closest)) {
      // passes the event to the handler and sets `this`
      // in the handler as the closest parent matching the
      // selector from the target element of the event
      handler.call(closest, event);
    }
  });
}

=========================================
EDIT: यह पोस्ट मूल रूप से matchesफ़ंक्शन के लिए उपयोग की जाती है ईवेंट तत्व पर DOM तत्व लक्षित होते हैं, लेकिन इससे ईवेंट के लक्ष्य केवल डायरेक्ट क्लास तक ही सीमित रहते हैं। इसके closestबजाय फ़ंक्शन का उपयोग करने के लिए अद्यतन किया गया है , जिससे वांछित वर्ग के बच्चों को घटनाओं को ट्रिगर करने की अनुमति मिलती है। मूल matchesकोड मूल फ़ाइल में पाया जा सकता है: https://jsfiddle.net/u6oje7af/23/

Answer 3

आप नीचे दिए गए कोड का उपयोग कर सकते हैं:

document.body.addEventListener('click', function (evt) {
    if (evt.target.className === 'databox') {
        alert(this)
    }
}, false);

Comments

मुझे यह कोशिश करनी होगी, यह एक अनूठा तरीका है जो वास्तव में बनाए रखने और लूपिंग से बेहतर प्रदर्शन करने में आसान हो सकता है!

— क्लिफ हेलसेल

यदि तत्व में कई वर्ग हैं, तो आपको उस फ़ील्ड में सही मान के लिए जाँच करना होगा। कक्षाएं और आदेश। मैं बल्कि जाना चाहता हूंevt.target.classList.contains('databox')

— honk31

यह मुझे बेतहाशा अक्षम लगता है। शरीर की हर एक घटना इस फंक्शन से गुजरती है। एक पाश के बारे में बनाए रखने के लिए इतना कठिन क्या है?

— जोसेफसाड

यह बहुत ही अयोग्य है, आप प्रत्येक तत्व से गुजरेंगे जैसा @JosefAssad ने कहा।

— nullwriter

Answer 4

आधुनिक जावास्क्रिप्ट के साथ इसे इस तरह किया जा सकता है:

const divs = document.querySelectorAll('.a');

divs.forEach(el => el.addEventListener('click', event => {
  console.log(event.target.classList[1]);
}));

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Example</title>
  <style>
    .a {
      background-color:red;
      height: 33px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      cursor: pointer;
    }
    
    .b {
      background-color:#00AA00;
      height: 50px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="a a-1">1</div>
  <div class="b">2</div>
  <div class="a a-2">11</div>
</body>
</html>

1. वर्ग नाम से सभी तत्वों को प्राप्त करता है
2. ForEach का उपयोग करने के साथ सभी तत्वों पर लूप
3. प्रत्येक तत्व पर एक घटना श्रोता संलग्न करें
4. event.targetविशिष्ट तत्व के लिए अधिक जानकारी प्राप्त करने के लिए उपयोग करता है