Слухач подій, коли елемент стає видимим?

Я будую панель інструментів, яка буде включена в сторінку. дів, до якого він буде включений, за замовчуванням відобразиться: немає . Чи є спосіб я помістити слухача подій на свою панель інструментів для прослуховування, коли він стає видимим, щоб він міг ініціалізуватися? чи мені доведеться передати йому змінну зі сторінки, що містить?

Дякую

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

У майбутньому новий інтерфейс HTML Intersection Observer - те, що ви шукаєте. Це дозволяє налаштувати зворотний виклик, який викликається кожен раз, коли один елемент, названий цільовим, перетинає або область перегляду пристрою, або вказаний елемент. Він доступний в останніх версіях 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 Extensions , де це звичайний випадок використання), Підсумок мутацій та спостерігач за мутаціями дозволять змінам 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
}