¿Detector de eventos para cuando el elemento se vuelve visible?

Estoy creando una barra de herramientas que se incluirá en una página. el div en el que se incluirá se mostrará de forma predeterminada : ninguno . ¿Hay alguna manera de poner un detector de eventos en mi barra de herramientas para que escuche cuando se vuelva visible y pueda inicializarse? ¿O tendré que pasarle una variable de la página que lo contiene?

Gracias

Los eventos de Javascript tratan con la interacción del usuario , si su código está lo suficientemente organizado, debería poder llamar a la función de inicialización en el mismo lugar donde cambia la visibilidad (es decir, no debería cambiar myElement.style.displayen muchos lugares, en su lugar, llame a una función / método que sí esto y cualquier otra cosa que desee).

En el futuro, la nueva API HTML Intersection Observer es lo que está buscando. Le permite configurar una devolución de llamada que se llama cada vez que un elemento, llamado objetivo, se cruza con la ventana gráfica del dispositivo o con un elemento específico. Está disponible en las últimas versiones de Chrome, Firefox y Edge. Consulte https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API para obtener más información.

Ejemplo de código simple para observar la pantalla: ninguna conmutación:

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

En acción: 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 });

Puede que llegue un poco tarde, pero podrías usar MutationObserver para observar cualquier cambio en el elemento deseado. Si se produce algún cambio, solo tendrá que comprobar si se muestra el elemento.

Hay al menos una forma, pero no es muy buena. Podrías sondear el elemento en busca de cambios como este:

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

El estándar DOM también especifica eventos de mutación , pero nunca he tenido la oportunidad de usarlos y no estoy seguro de qué tan bien son compatibles. Los usarías así:

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

Este código está fuera de mi cabeza, así que no estoy seguro de si funcionaría.

La mejor y más fácil solución sería tener una devolución de llamada en la función que muestra su objetivo.

Tuve este mismo problema y creé un complemento jQuery para resolverlo en nuestro sitio.

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

Así es como lo usaría según su ejemplo:

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

Como dice @figha, si esta es su propia página web , debe ejecutar lo que necesite ejecutar después de hacer visible el elemento.

Sin embargo, con el fin de responder a la pregunta (y para cualquiera que haga extensiones de Chrome o Firefox , donde este es un caso de uso común), Mutation Summary y Mutation Observer permitirán que los cambios DOM activen eventos.

Por ejemplo, activar un evento para un elemento con un data-widgetatributo que se agrega al DOM. Tomando prestado este excelente ejemplo del 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);

Las respuestas incluyen added, removed, valueChangedy mucho más . valueChangedincluye todos los atributos, incluidos displayetc.

También puede probar este complemento de jQuery: https://github.com/morr/jquery.appear

Solo para comentar sobre el soporte del navegador del detector de eventos DOMAttrModified:

Compatibilidad con varios navegadores

Estos eventos no se implementan de manera uniforme en diferentes navegadores, por ejemplo:

• IE antes de la versión 9 no admitía los eventos de mutación en absoluto y no implementa algunos de ellos correctamente en la versión 9 (por ejemplo, DOMNodeInserted)

• WebKit no es compatible con DOMAttrModified (consulte el error 8191 de webkit y la solución)

• "eventos de nombre de mutación", es decir, DOMElementNameChanged y DOMAttributeNameChanged no son compatibles con Firefox (a partir de la versión 11), y probablemente también en otros navegadores.

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

mi solución:

; (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 ejemplo:

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

function processMoreLessButton(){
//some logic
}