Javascript Kod Bloğunu Sürekli Halde Çalıştırma
Ş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.
<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");
});
})
//