如何使用 javascript/jquery 编写 onshow 事件？答案

【问题标题】：How to write onshow event using javascript/jquery?如何使用 javascript/jquery 编写 onshow 事件？
【发布时间】：2010-11-28 18:16:14
【问题描述】：

我的页面上有一个锚标记，我想要一个附加到它的事件，该事件将在此元素的显示发生变化时触发。

我该如何编写这个活动？并在此元素的显示发生变化时捕获？

【问题讨论】：

标签： javascript jquery html dom javascript-events

【解决方案1】：

这是我在 onShow 上做的方式，作为一个 jQuery 插件。但是，它可能会也可能不会完全执行您正在执行的操作。

(function($){
  $.fn.extend({ 
    onShow: function(callback, unbind){
      return this.each(function(){
        var _this = this;
        var bindopt = (unbind==undefined)?true:unbind; 
        if($.isFunction(callback)){
          if($(_this).is(':hidden')){
            var checkVis = function(){
              if($(_this).is(':visible')){
                callback.call(_this);
                if(bindopt){
                  $('body').unbind('click keyup keydown', checkVis);
                }
              }                         
            }
            $('body').bind('click keyup keydown', checkVis);
          }
          else{
            callback.call(_this);
          }
        }
      });
    }
  });
})(jQuery);

您可以在 $(document).ready() 函数中调用它，并使用回调在元素显示时触发，就像这样。

$(document).ready(function(){
  $('#myelement').onShow(function(){
    alert('this element is now shown');
  });
});

它通过将 click、keyup 和 keydown 事件绑定到 body 来检查元素是否显示，因为这些事件最有可能导致元素显示并且用户非常频繁地执行这些事件。这可能不是非常优雅，但可以完成工作。此外，一旦显示元素，这些事件就会与主体解除绑定，以免继续触发并降低性能。

【讨论】：

我不得不将 :visible 替换为 if($(obj).is(':visible')){ 中的 :hidden，但除此之外效果很好。
将 callback.call() 改为 callback.call(obj);其中注入了元素。如果我错了，请告诉我。

【解决方案2】：

您不能直接在 JavaScript 中获得 onshow 事件。请记住，以下方法是非标准。

在 IE 中你可以使用

onpropertychange event

在元素的属性之后触发变化

对于 Mozilla

你可以使用

watch

监视要分配的属性一个值并在那个时候运行一个函数发生。

【讨论】：

这个的标准是什么？

【解决方案3】：

你也可以覆盖 jQuery 的默认显示方法：

var orgShow = $.fn.show;
$.fn.show = function()
{
    $(this).trigger( 'myOnShowEvent' );
    orgShow.apply( this, arguments );
    return this;
}

现在只需将您的代码绑定到事件：

$('#foo').bind( "myOnShowEvent", function()
{
    console.log( "SHOWN!" )
});

【讨论】：

如果您知道您将使用.show()，这是一个非常酷的解决方案。但是，它不适用于所有显示元素的情况，无论是通过设置display:block、fadeIn()、slideDown() 等...虽然仍然是独一无二的。

【解决方案4】：

此链接中的代码对我有用：http://viralpatel.net/blogs/jquery-trigger-custom-event-show-hide-element/

(function ($) {
  $.each(['show', 'hide'], function (i, ev) {
    var el = $.fn[ev];
    $.fn[ev] = function () {
      this.trigger(ev);
      return el.apply(this, arguments);
    };
  });
})(jQuery); 

$('#foo').on('show', function() {
      console.log('#foo is now visible');
});

$('#foo').on('hide', function() {
      console.log('#foo is hidden');
});

但是，首先调用回调函数，然后显示/隐藏元素。所以如果你有一些与同一个选择器相关的操作，需要在显示或隐藏后进行，临时的解决方法是添加几毫秒的超时。

【讨论】：