jQuery监听元素显示时触发事件_jq判断一个元素显示触发事件-优快云博客

在 jQuery 中，如果你想监听某个元素是否变得可见（即其样式中的 display 属性从 none 变为其他值），你不能直接使用 .on() 方法来监听一个显示事件，因为 HTML DOM 没有直接提供这样的事件。但你可以通过其他方法来实现这一功能。

使用 MutationObserver

你可以使用 MutationObserver 来监听 DOM 的变化，包括元素的显示状态。下面是一个简单的例子：

// 选择要观察的元素  
var targetNode = document.getElementById('myElement');  
  
// 观察器的配置（需要观察什么变动）  
var config = { attributes: true, childList: true, subtree: true };  
  
// 当观察到变动时执行的回调函数  
var callback = function(mutationsList, observer) {  
    for(var mutation of mutationsList) {  
        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {  
            // 检查元素是否显示  
            if (window.getComputedStyle(targetNode).display !== 'none') {  
                console.log('Element is now visible');  
            }  
        }  
    }  
};  
  
// 创建一个观察器实例并传入回调函数  
var observer = new MutationObserver(callback);  
  
// 以上面的配置开始观察目标节点  
observer.observe(targetNode, config);