Öğenin ne zaman görünür hale geldiği için olay dinleyicisi?

Bir sayfaya eklenecek bir araç çubuğu oluşturuyorum. dahil edileceği div varsayılan olarak görüntülenecektir: yok . Araç çubuğuma bir olay dinleyicisi koyup, görünür hale geldiğinde onu dinleyerek başlatabilmemin bir yolu var mı? yoksa onu içeren sayfadan bir değişken geçirmem gerekecek mi?

Teşekkürler

Javascript olayları Kullanıcı Etkileşimi ile ilgilenir , eğer kodunuz yeterince organize edilmişse, görünürlük değiştiği yerde başlatma işlevini çağırabilmelisiniz (yani myElement.style.displaybirçok yerde değişmemelisiniz , bunun yerine, bunu yapan bir işlevi / yöntemi çağırmalısınız. bu ve isteyebileceğiniz her şey).

Gelecekte, aradığınız şey, yeni HTML Intersection Observer API'sidir. Hedef olarak adlandırılan bir öğe, aygıt görünüm alanıyla veya belirli bir öğeyle kesiştiğinde çağrılan bir geri aramayı yapılandırmanıza olanak tanır. Chrome, Firefox ve Edge'in son sürümlerinde mevcuttur. Daha fazla bilgi için https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API adresine bakın .

Ekranı gözlemlemek için basit kod örneği: yok anahtarlama:

// Start observing visbility of element. On change, the
//   the callback is called with Boolean visibility as
//   argument:

respondToVisibility(element, callback) {
  var options = {
    root: document.documentElement
  }

  var observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      callback(entry.intersectionRatio > 0);
    });
  }, options);

  observer.observe(element);
}

Eylemde: https://jsfiddle.net/elmarj/u35tez5n/5/

var targetNode = document.getElementById('elementId');
var observer = new MutationObserver(function(){
    if(targetNode.style.display != 'none'){
        // doSomething
    }
});
observer.observe(targetNode, { attributes: true, childList: true });

Biraz geç kalmış olabilirim, ancak istenen öğedeki değişiklikleri gözlemlemek için MutationObserver'ı kullanabilirsiniz. Herhangi bir değişiklik olursa, öğenin görüntülenip görüntülenmediğini kontrol etmeniz yeterlidir.

En az bir yol var ama bu pek iyi bir yol değil. Öğede aşağıdaki gibi değişiklikler için anket yapabilirsiniz:

var previous_style,
    poll = window.setInterval(function()
{
    var current_style = document.getElementById('target').style.display;
    if (previous_style != current_style) {
        alert('style changed');
        window.clearInterval(poll);
    } else {
        previous_style = current_style;
    }
}, 100);

DOM standardı ayrıca mutasyon olaylarını da belirtir , ancak bunları kullanma şansım hiç olmadı ve ne kadar iyi desteklendiklerinden emin değilim. Onları şu şekilde kullanırsın:

target.addEventListener('DOMAttrModified', function()
{
    if (e.attrName == 'style') {
        alert('style changed');
    }
}, false);

Bu kod aklımın ucunda, bu yüzden işe yarayıp yaramayacağından emin değilim.

En iyi ve en kolay çözüm, hedefinizi görüntüleyen işlevde bir geri aramaya sahip olmaktır.

Aynı sorunu yaşadım ve sitemizde çözmek için bir jQuery eklentisi oluşturdum.

https://github.com/shaunbowe/jquery.visibilityChanged

Örneğinize göre bunu nasıl kullanacağınız aşağıda açıklanmıştır:

$('#contentDiv').visibilityChanged(function(element, visible) {
    alert("do something");
});

@Figha'nın dediği gibi, eğer bu kendi web sayfanızsa , öğeyi görünür hale getirdikten sonra çalıştırmanız gereken her şeyi çalıştırmalısınız.

Ancak, soruyu yanıtlamak amacıyla (ve bunun yaygın bir kullanım durumu olduğu Chrome veya Firefox Uzantıları yapan herkes ), Mutation Summary ve Mutation Observer , DOM değişikliklerinin olayları tetiklemesine izin verecektir.

Örneğin data-widget, DOM'a eklenen özniteliğe sahip bir öğe için bir olay tetikleme . Bu mükemmel örneği David Walsh'un blogundan ödünç alarak :

var observer = new MutationObserver(function(mutations) {
    // For the sake of...observation...let's output the mutation to console to see how this all works
    mutations.forEach(function(mutation) {
        console.log(mutation.type);
    });    
});

// Notify me of everything!
var observerConfig = {
    attributes: true, 
    childList: true, 
    characterData: true 
};

// Node, config
// In this case we'll listen to all changes to body and child nodes
var targetNode = document.body;
observer.observe(targetNode, observerConfig);

Yanıtlar içerir added, removed, valueChangedve daha fazlası . valueChangeddahil olmak üzere tüm özellikleri içerir display.

Bu jQuery eklentisini de deneyebilirsiniz: https://github.com/morr/jquery.appear

DOMAttrModified olay dinleyici tarayıcı desteğiyle ilgili yorum yapmak için:

Çapraz tarayıcı desteği

Bu olaylar, farklı tarayıcılarda tutarlı bir şekilde uygulanmaz, örneğin:

• Sürüm 9'dan önceki IE, mutasyon olaylarını hiç desteklemiyordu ve bazılarını sürüm 9'da doğru şekilde uygulamıyor (örneğin, DOMNodeInserted)

• WebKit, DOMAttrModified'ı desteklemiyor (bkz. Webkit hatası 8191 ve geçici çözüm)

• "mutasyon adı olayları", yani DOMElementNameChanged ve DOMAttributeNameChanged Firefox'ta (sürüm 11'den itibaren) ve muhtemelen diğer tarayıcılarda desteklenmez.

Kaynak: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events

çözümüm:

; (function ($) {
$.each([ "toggle", "show", "hide" ], function( i, name ) {
    var cssFn = $.fn[ name ];
    $.fn[ name ] = function( speed, easing, callback ) {
        if(speed == null || typeof speed === "boolean"){
            var ret=cssFn.apply( this, arguments )
            $.fn.triggerVisibleEvent.apply(this,arguments)
            return ret
        }else{
            var that=this
            var new_callback=function(){
                callback.call(this)
                $.fn.triggerVisibleEvent.apply(that,arguments)
            }
            var ret=this.animate( genFx( name, true ), speed, easing, new_callback )
            return ret
        }
    };
});

$.fn.triggerVisibleEvent=function(){
    this.each(function(){
        if($(this).is(':visible')){
            $(this).trigger('visible')
            $(this).find('[data-trigger-visible-event]').triggerVisibleEvent()
        }
    })
}
})(jQuery);

Örneğin:

if(!$info_center.is(':visible')){
    $info_center.attr('data-trigger-visible-event','true').one('visible',processMoreLessButton)
}else{
    processMoreLessButton()
}

function processMoreLessButton(){
//some logic
}