Pemroses acara saat elemen menjadi terlihat?

Saya sedang membangun toolbar yang akan dimasukkan ke dalam halaman. div yang akan dimasukkan akan secara default menampilkan: none . Adakah cara untuk meletakkan event listener di toolbar saya untuk didengarkan ketika sudah terlihat sehingga bisa diinisialisasi? atau haruskah saya meneruskan variabel dari halaman yang memuatnya?

Terima kasih

Peristiwa Javascript berhubungan dengan Interaksi Pengguna , jika kode Anda cukup terorganisir, Anda harus dapat memanggil fungsi inisialisasi di tempat yang sama di mana visibilitas berubah (yaitu Anda tidak boleh mengubah myElement.style.displaydi banyak tempat, sebaliknya, panggil fungsi / metode yang ini dan hal lain yang mungkin Anda inginkan).

Untuk selanjutnya, HTML Intersection Observer API baru adalah hal yang Anda cari. Hal ini memungkinkan Anda untuk mengonfigurasi callback yang dipanggil setiap kali satu elemen, yang disebut target, berpotongan dengan area pandang perangkat atau elemen yang ditentukan. Ini tersedia di versi terbaru Chrome, Firefox dan Edge. Lihat https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API untuk info lebih lanjut.

Contoh kode sederhana untuk mengamati display: none switching:

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

Beraksi: 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 });

Saya mungkin sedikit terlambat, tetapi Anda bisa menggunakan MutationObserver untuk mengamati setiap perubahan pada elemen yang diinginkan. Jika ada perubahan yang terjadi, Anda hanya perlu memeriksa apakah elemen tersebut ditampilkan.

Setidaknya ada satu cara, tapi itu tidak terlalu bagus. Anda bisa mengumpulkan elemen untuk perubahan seperti ini:

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

Standar DOM juga menentukan peristiwa mutasi , tetapi saya tidak pernah memiliki kesempatan untuk menggunakannya, dan saya tidak yakin seberapa baik mereka didukung. Anda akan menggunakannya seperti ini:

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

Kode ini di luar kepala saya, jadi saya tidak yakin apakah itu akan berhasil.

Solusi terbaik dan termudah adalah memiliki panggilan balik dalam fungsi yang menampilkan target Anda.

Saya memiliki masalah yang sama dan membuat plugin jQuery untuk menyelesaikannya untuk situs kami.

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

Berikut adalah cara Anda menggunakannya berdasarkan contoh Anda:

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

Seperti yang dikatakan @figha, jika ini adalah halaman web Anda sendiri , Anda harus menjalankan apa pun yang Anda perlukan untuk menjalankan setelah Anda membuat elemen terlihat.

Namun, untuk tujuan menjawab pertanyaan (dan siapa pun yang membuat Ekstensi Chrome atau Firefox , di mana ini adalah kasus penggunaan umum), Ringkasan Mutasi dan Pengamat Mutasi akan mengizinkan perubahan DOM untuk memicu peristiwa.

Misalnya, memicu peristiwa untuk elemen dengan data-widgetatribut yang ditambahkan ke DOM. Meminjam contoh luar biasa ini dari blog 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);

Tanggapan meliputi added, removed, valueChangeddan banyak lagi . valueChangedmencakup semua atribut, termasuk displaydll.

Anda juga dapat mencoba plugin jQuery ini: https://github.com/morr/jquery.appear

Hanya untuk mengomentari dukungan browser event listener DOMAttrModified:

Dukungan lintas browser

Peristiwa ini tidak diterapkan secara konsisten di berbagai browser, misalnya:

• IE sebelum versi 9 sama sekali tidak mendukung peristiwa mutasi dan tidak menerapkan beberapa di antaranya dengan benar di versi 9 (misalnya, DOMNodeInserted)

• WebKit tidak mendukung DOMAttrModified (lihat bug webkit 8191 dan solusinya)

• "peristiwa nama mutasi", yaitu DOMElementNameChanged dan DOMAttributeNameChanged tidak didukung di Firefox (mulai versi 11), dan mungkin juga di browser lain.

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

solusi saya:

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

sebagai contoh:

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

function processMoreLessButton(){
//some logic
}