Ouvinte de eventos para quando o elemento se torna visível?

Estou construindo uma barra de ferramentas que será incluída em uma página. o div no qual será incluído será exibido por padrão : nenhum . Existe uma maneira de colocar um ouvinte de eventos na minha barra de ferramentas para ouvir quando ele se tornar visível para que possa inicializar? ou terei que passar uma variável da página que o contém?

obrigado

Os eventos Javascript lidam com a interação do usuário , se o seu código estiver organizado o suficiente, você deve ser capaz de chamar a função de inicialização no mesmo lugar onde a visibilidade muda (ou seja, você não deve mudar myElement.style.displayem muitos lugares, em vez disso, chame uma função / método que o faça isso e qualquer outra coisa que você queira).

No futuro, a nova API HTML Intersection Observer é o que você está procurando. Ele permite que você configure um retorno de chamada que é chamado sempre que um elemento, chamado de destino, cruza a janela de visualização do dispositivo ou um elemento especificado. Ele está disponível nas versões mais recentes do Chrome, Firefox e Edge. Consulte https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API para obter mais informações.

Exemplo de código simples para observação da tela: nenhuma comutação:

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

Em ação: 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 });

Posso estar um pouco atrasado, mas você poderia apenas usar o MutationObserver para observar quaisquer alterações no elemento desejado. Se ocorrer alguma alteração, você só terá que verificar se o elemento é exibido.

Existe pelo menos um caminho, mas não é muito bom. Você pode apenas pesquisar o elemento para mudanças como esta:

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

O padrão DOM também especifica eventos de mutação , mas nunca tive a chance de usá-los e não tenho certeza se eles são bem suportados. Você os usaria assim:

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

Este código está na minha cabeça, então não tenho certeza se funcionaria.

A melhor e mais fácil solução seria ter um retorno de chamada na função exibindo seu destino.

Eu tive esse mesmo problema e criei um plugin jQuery para resolvê-lo em nosso site.

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

Aqui está como você o usaria com base em seu exemplo:

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

Como @figha diz, se esta é sua própria página da web , você deve apenas executar o que for necessário para executar após tornar o elemento visível.

No entanto, para o propósito de responder à pergunta (e qualquer um que fizer extensões para Chrome ou Firefox , onde este é um caso de uso comum), Mutation Summary e Mutation Observer permitirão que as alterações do DOM acionem eventos.

Por exemplo, disparar um evento para um elemento com data-widgetatributo sendo adicionado ao DOM. Pegando emprestado este excelente exemplo do blog de David Walsh :

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

As respostas incluem added, removed, valueChangede mais . valueChangedinclui todos os atributos, incluindo displayetc.

Você também pode tentar este plugin jQuery: https://github.com/morr/jquery.appear

Apenas para comentar sobre o suporte do navegador do listener de eventos DOMAttrModified:

Suporte para vários navegadores

Esses eventos não são implementados de forma consistente em diferentes navegadores, por exemplo:

• O IE anterior à versão 9 não era compatível com os eventos de mutação e não implementava alguns deles corretamente na versão 9 (por exemplo, DOMNodeInserted)

• O WebKit não é compatível com DOMAttrModified (consulte o bug 8191 do webkit e a solução alternativa)

• "eventos de nome de mutação", ou seja, DOMElementNameChanged e DOMAttributeNameChanged não são suportados no Firefox (a partir da versão 11), e provavelmente em outros navegadores também.

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

minha solução:

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

por exemplo:

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

function processMoreLessButton(){
//some logic
}