Слушатель событий, когда элемент становится видимым?

Я создаю панель инструментов, которая будет включена в страницу. div, в который он будет включен, по умолчанию будет отображать: none . Есть ли способ разместить прослушиватель событий на моей панели инструментов, чтобы отслеживать, когда он становится видимым, чтобы его можно было инициализировать? или мне придется передать ему переменную с содержащей его страницы?

Спасибо

События Javascript имеют дело с взаимодействием с пользователем , если ваш код достаточно организован, вы должны иметь возможность вызывать функцию инициализации в том же месте, где изменяется видимость (т.е. вы не должны изменять myElement.style.displayво многих местах, вместо этого вызывайте функцию / метод, это и все, что вам может понадобиться).

Забегая вперед, вам нужен новый HTML Intersection Observer API. Он позволяет вам настроить обратный вызов, который вызывается всякий раз, когда один элемент, называемый целью, пересекает либо область просмотра устройства, либо указанный элемент. Он доступен в последних версиях Chrome, Firefox и Edge. См. Https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API для получения дополнительной информации.

Пример простого кода для наблюдения за дисплеем: переключение отсутствует:

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

В действии: 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 });

Я могу немного опоздать, но вы можете просто использовать MutationObserver, чтобы наблюдать за любыми изменениями в желаемом элементе. Если произойдет какое-либо изменение, вам просто нужно будет проверить, отображается ли элемент.

Есть хоть один способ, но он не очень удачный. Вы можете просто опросить элемент на предмет таких изменений:

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 также определяет события мутации , но у меня никогда не было возможности их использовать, и я не уверен, насколько хорошо они поддерживаются. Вы бы использовали их так:

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

Этот код не у меня в голове, поэтому я не уверен, что он сработает.

Лучшее и самое простое решение будет иметь функцию обратного вызова в функции отображаются ваши цели.

У меня была такая же проблема, и я создал плагин jQuery, чтобы решить ее для нашего сайта.

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

Вот как вы бы использовали его на своем примере:

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

Как говорит @figha, если это ваша собственная веб-страница , вы должны просто запустить все, что вам нужно, после того, как вы сделаете элемент видимым.

Однако в целях ответа на вопрос (и для всех, кто создает расширения Chrome или Firefox , где это является обычным вариантом использования), Mutation Summary и Mutation Observer позволят изменениям DOM запускать события.

Например, запуск события для элемента с data-widgetдобавленным атрибутом в DOM. Заимствуя этот отличный пример из блога Дэвида Уолша :

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

Ответы включают added, removed, valueChangedи многие другие . valueChangedвключает все атрибуты, в том числе displayи т. д.

Вы также можете попробовать этот плагин jQuery: https://github.com/morr/jquery.appear

Просто чтобы прокомментировать поддержку браузера прослушивателя событий DOMAttrModified:

Кроссбраузерная поддержка

Эти события не реализуются последовательно в разных браузерах, например:

• IE до версии 9 вообще не поддерживал события мутации и не реализует некоторые из них правильно в версии 9 (например, DOMNodeInserted)

• WebKit не поддерживает DOMAttrModified (см. Ошибку webkit 8191 и обходной путь)

• «события имени мутации», то есть DOMElementNameChanged и DOMAttributeNameChanged, не поддерживаются в Firefox (начиная с версии 11) и, вероятно, в других браузерах.

Источник: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events

мое решение:

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

например:

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

function processMoreLessButton(){
//some logic
}