v2.5.2
Giriş yap

Javascript Kod Bloğunu Sürekli Halde Çalıştırma

bozkan
560 defa görüntülendi ve 1 kişi tarafından değerlendirildi
1 1

Şu şekilde bir javascript yapım var, sadece script bloğunu paylaşıyorum;

  document.querySelector(".passive").addEventListener('click', function() {
      
       document.querySelector(".active").classList.add("passive");

       document.querySelector(".active").classList.remove("active");
      
      this.classList.add("active");
      this.classList.remove("passive");
      
  });

Anlaşılacağı üzere, passive class'ına sahip olan elemente tıklanıldığında active yapıyor ve passive class'ını siliyor. Aynı anda da active class'ına sahip olan elementi bulup
passive yapıyor. Fakat böyle bir durumda kod yalnızca 1 kere çalışıyor. Yani passive class'ı active olduktan sonra diğer passive olan element hiçbir şekilde etkilenmiyor.

Fakat yapımı şu şekilde değiştirdiğimde;

  window.addEventListener('mousemove', function() {

  document.querySelector(".passive").addEventListener('click', function() {
      
       document.querySelector(".active").classList.add("passive");

       document.querySelector(".active").classList.remove("active");
      
      this.classList.add("active");
      this.classList.remove("passive");
      
  });
  });

Sorunsuz bir şekilde kullanabiliyorum. Ama bu şekilde kod kullanımının doğru olduğunu düşünmüyorum.
Sonuçta arkaplanda sürekli bir işleyiş oluyor mousemove'da. Bunun verimli bir kullanımı nedir acaba?
Bilgisi olan varsa yazabilirse çok sevinirim.

javascript
Cevap yaz
Cevaplar (1)
batuhanal
1270 gün önce

<button class="herhangi">like</button>
<button class="herhangi">unlike</button>


//.passive yerine iki button'a ayni classı vermeyi dene eger böyle değilse
        //.passive yerine iki button'a ayni classı vermeyi dene eger böyle değilse
    [...document.querySelectorAll(".herhangi")].forEach(e=>{
      e.addEventListener('click', function() {
        [...document.querySelectorAll(".herhangi")].forEach(f=>{
          f.classList.add("passive");
          f.classList.remove("active");
        })
          
        this.classList.add("active");
        this.classList.remove("passive");
        
      });
    })
    //
0
#005116