Trình nghe sự kiện khi nào phần tử hiển thị?

Tôi đang xây dựng một thanh công cụ sẽ được đưa vào một trang. div mà nó sẽ được đưa vào sẽ mặc định hiển thị: không có . Có cách nào tôi có thể đặt một trình lắng nghe sự kiện trên thanh công cụ của mình để lắng nghe khi nó hiển thị để nó có thể khởi chạy không? hay tôi sẽ phải chuyển cho nó một biến từ trang chứa?

Cảm ơn

Các sự kiện Javascript liên quan đến Tương tác người dùng , nếu mã của bạn được tổ chức đủ, bạn sẽ có thể gọi hàm khởi tạo ở cùng một nơi mà khả năng hiển thị thay đổi (nghĩa là bạn không nên thay đổi myElement.style.displayở nhiều nơi, thay vào đó, hãy gọi một hàm / phương thức. cái này và bất cứ thứ gì khác mà bạn có thể muốn).

Trong tương lai, API trình quan sát giao lộ HTML mới là thứ bạn đang tìm kiếm. Nó cho phép bạn định cấu hình một lệnh gọi lại được gọi bất cứ khi nào một phần tử, được gọi là đích, giao nhau giữa khung nhìn thiết bị hoặc một phần tử được chỉ định. Nó có sẵn trong các phiên bản mới nhất của Chrome, Firefox và Edge. Xem https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API để biết thêm thông tin.

Ví dụ mã đơn giản để quan sát màn hình: không chuyển đổi:

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

Đang hoạt động: 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 });

Tôi có thể đến muộn một chút, nhưng bạn có thể sử dụng MutationObserver để quan sát bất kỳ thay đổi nào trên phần tử mong muốn. Nếu có bất kỳ thay đổi nào xảy ra, bạn sẽ chỉ phải kiểm tra xem phần tử có được hiển thị hay không.

Có ít nhất một cách, nhưng nó không phải là một cách tốt. Bạn chỉ có thể thăm dò ý kiến ​​phần tử cho những thay đổi như sau:

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

Tiêu chuẩn DOM cũng chỉ định các sự kiện đột biến , nhưng tôi chưa bao giờ có cơ hội sử dụng chúng và tôi không chắc chúng được hỗ trợ tốt như thế nào. Bạn sẽ sử dụng chúng như thế này:

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

Mã này nằm ngoài đầu tôi, vì vậy tôi không chắc liệu nó có hoạt động hay không.

Giải pháp tốt nhất và dễ dàng nhất là có một lệnh gọi lại trong hàm hiển thị mục tiêu của bạn.

Tôi cũng gặp vấn đề này và đã tạo một plugin jQuery để giải quyết nó cho trang web của chúng tôi.

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

Đây là cách bạn sẽ sử dụng nó dựa trên ví dụ của bạn:

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

Như @figha nói, nếu đây là trang web của riêng bạn, bạn chỉ nên chạy bất cứ thứ gì bạn cần để chạy sau khi bạn hiển thị phần tử.

Tuy nhiên, với mục đích trả lời câu hỏi (và bất kỳ ai tạo Tiện ích mở rộng của Chrome hoặc Firefox , nơi đây là trường hợp sử dụng phổ biến), Tóm tắt đột biến và Trình quan sát đột biến sẽ cho phép các thay đổi DOM kích hoạt sự kiện.

Ví dụ: kích hoạt sự kiện cho một phần tử có data-widgetthuộc tính được thêm vào DOM. Mượn ví dụ tuyệt vời này từ blog của 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);

Responses bao gồm added, removed, valueChangedvà nhiều hơn nữa . valueChangedbao gồm tất cả các thuộc tính, bao gồm displayv.v.

Bạn cũng có thể thử plugin jQuery này: https://github.com/morr/jquery.appear

Chỉ để nhận xét về hỗ trợ trình duyệt trình nghe sự kiện DOMAttrModified:

Hỗ trợ nhiều trình duyệt

Các sự kiện này không được triển khai nhất quán trên các trình duyệt khác nhau, ví dụ:

• IE trước phiên bản 9 hoàn toàn không hỗ trợ các sự kiện đột biến và không triển khai chính xác một số trong số chúng trong phiên bản 9 (ví dụ: DOMNodeInserted)

• WebKit không hỗ trợ DOMAttrModified (xem lỗi webkit 8191 và cách giải quyết)

• "sự kiện tên đột biến", tức là DOMElementNameChanged và DOMAttributeNameChanged không được hỗ trợ trong Firefox (kể từ phiên bản 11) và có thể trong các trình duyệt khác.

Nguồn: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events

giải pháp của tôi:

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

ví dụ:

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

function processMoreLessButton(){
//some logic
}