ক্লাসে জাভাস্ক্রিপ্ট ক্লিক ইভেন্ট শ্রোতা

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 ইভেন্টের নাম ('ক্লিক'), ফাংশনটির উল্লেখ (ফাংশনটির ফলাফল নয় যেমনটি এখন প্যারেন্স সহ মাই ফাংশন () কল করে) এবং ইভেন্ট বুদ্বুদ চিহ্নিত করার জন্য একটি পতাকা গ্রহণ করে। AddEventListener কলটি দেখতে পাওয়া উচিত: elem.addEventListener ('ক্লিক করুন', মাই ফাংশন, মিথ্যা) এবং শ্রেণিকাম একটি নোডলিস্ট টাইপ। সমস্ত উপাদানের উপর লুপ করা প্রয়োজন এবং তালিকার প্রত্যেকটির সাথে শ্রোতার সংযুক্ত করা উচিত।

— জোয়ে গেরেরা

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);
    });

দ্রষ্টব্য: পুরানো ব্রাউজারগুলি (আই 6, আই 7, আই 8 এর মতো) সমর্থন করে না getElementsByClassNameএবং তাই তারা ফিরে আসে undefined।

---

সম্পাদনা: সংশোধন

getElementsByClassNameএকটি অ্যারে ফেরত দেয় না, তবে বেশিরভাগ ক্ষেত্রে একটি HTML সংগ্রহ বা কিছু ব্রাউজারে নোডলিস্ট ( মজিলা রেফ )। এই উভয় প্রকারেরই অ্যারে-লাইক, (যার অর্থ তাদের দৈর্ঘ্যের সম্পত্তি রয়েছে এবং তাদের সূচকের মাধ্যমে অবজেক্টগুলি অ্যাক্সেস করা যেতে পারে), তবে কঠোরভাবে কোনও অ্যারে বা অ্যারে থেকে উত্তরাধিকার সূত্রে প্রাপ্ত নয়। (অর্থাত অন্যান্য পদ্ধতি যা অ্যারেতে সঞ্চালিত হতে পারে এই ধরণের ক্ষেত্রে সম্পাদন করা যায় না)

ইউরোপ @ নেমোকে এটি নির্দেশ করে এবং পুরোপুরি বুঝতে আমাকে খনন করার জন্য ধন্যবাদ ।

Comments

এটি পুরোপুরি কাজ করে। ধন্যবাদ. আমি আসলে বুঝতে পারি নি যে jQuery লুপিং করেছে। অনুদীপকে দারুণ সাহায্য করুন। আপনার কাজের উত্তরটি এখানে: jsfiddle.net/LWda3/2

— সেকেন্ডস্টোসাম

document.getElementsByClassNameএমনকি কেবলমাত্র একটি উপাদান মানদণ্ডের সাথে মেলে এমনকি আসলে সবসময় অ্যারে ফিরিয়ে দেয়

— গিলহর্ম শেহন

অ্যারের প্রথম উপাদানটি সমস্ত ডোম উপাদান হলেও সতর্ক। সুতরাং আপনার

— লুপটির

stackoverflow.com/a/13258908/1333493 "ডকুমেন্ট.জেট এলিমেন্টসওয়াই ক্লাসনাম কোনও অ্যারে ফেরায় না It

— নিমো

Array.from()একটি দ্বিতীয় প্যারামিটার রয়েছে যা মানচিত্রের ফাংশন তাই উপরের (এস 6 সমর্থন ধরে) লিখিত হতে পারে 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ফাংশনটির আইই এর সাথে সামঞ্জস্যতার কিছু সমস্যা রয়েছে যা আপাতদৃষ্টিতে (কী হয় না?)।

আপনার যদি এই জাতীয় ক্রিয়াকলাপ বারবার শোনার মতো প্রয়োজন হয় তবে এটি একটি ফাংশন হিসাবে তৈরি করা যেতে পারে

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);
    }
  });
}

=========================================
সম্পাদনা: এই পোস্টটি মূলত এর 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')

— হন্ক 31

এটি আমার কাছে বুনোভাবে অদক্ষ বলে মনে হচ্ছে। দেহের প্রতিটি একক ইভেন্ট এই ফাংশনটির মধ্য দিয়ে। লুপটি বজায় রাখা এত কঠিন কী?

— জোসেফআসাদ

এটি খুব অদক্ষ, আপনি @ জোসেফআসাদ যেমন বলেছিলেন তেমন প্রতিটি উপাদান দিয়ে আপনি যাবেন।

— নাল রাইটার

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. প্রতিটি ব্যবহারের সাথে সমস্ত উপাদানকে লুপ করে
3. প্রতিটি উপাদান একটি ইভেন্ট শ্রোতা সংযুক্ত করুন
4. event.targetনির্দিষ্ট উপাদানগুলির জন্য আরও তথ্য পুনরুদ্ধার করতে ব্যবহার করে