JS：什么时候元素变成可见的事件监听器？
我正在构build一个要包含在页面中的工具栏。 它将被包含在div中将默认显示：无 。 有没有办法我可以把一个事件监听器在我的工具栏上，以听取什么时候变得可见，所以它可以初始化？ 或者我将不得不从包含页面传递一个variables？
谢谢
javascript事件处理用户交互，如果你的代码组织得不够，你应该能够在可见性改变的地方调用初始化函数（即你不应该在很多地方改变myElement.style.display，而是调用function/方法，这样做和任何你可能想要的）
我有同样的问题，并创build了一个jQuery插件来解决我们的网站。
https://github.com/shaunbowe/jquery.visibilityChanged
下面是你将如何使用它的基础上你的例子：
$('#contentDiv').visibilityChanged(function(element, visible) { alert("do something"); }); 至less有一种方法，但不是一个很好的方法。 你可以轮询元素的变化像这样：
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);
这段代码不在我的头顶，所以我不确定它是否可行。
最好和最简单的解决scheme将是在显示您的目标的functioncallback。
outlook未来，新的HTML交集观察者API是你正在寻找的东西。 至less它可以在最新的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/
你也可以试试这个jQuery插件： https ： //github.com/morr/jquery.appear
只是对DOMAttrModified事件监听器浏览器支持发表评论：
跨浏览器支持
这些事件并不是在不同浏览器中一致地实现的，例如：
-
版本9之前的IE根本不支持突变事件，并且在版本9中没有正确实现其中的一些（例如，DOMNodeInserted）
-
WebKit不支持DOMAttrModified（请参阅webkit bug 8191和解决方法）
-
Firefox中不支持DOMElementNameChanged和DOMAttributeNameChanged（从版本11开始），也可能在其他浏览器中支持“突变名称事件”。
来源： https ： //developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events
正如@菲加所说， 如果这是你自己的网页 ，你应该运行任何你需要运行后，让元素可见。
但是，为了回答问题（以及任何制作Chrome或Firefox扩展 ，这是常见用例）， Mutation Summary和Mutation Observer将允许DOM更改触发事件。
例如，触发data-widget属性被添加到DOM的元素的事件。 从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);
响应包括added ， removed ， valueChanged等 。 valueChanged包含所有属性，包括display等
我的解决scheme
; (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 }
