Question

我的页面上有一个锚标记，我希望附加一个事件，当这个元素的显示发生变化时会激活。

我怎么写这个活动？并且只要这个元素的显示发生变化就会捕获？

Answer 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以检查是否显示了该元素，因为这些事件最有可能导致元素被显示并且非常频繁地由用户执行。这可能不是非常优雅，但可以完成工作。此外，一旦显示元素，这些事件将从身体解除绑定，不会继续发射并降低性能。

Answer 2

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

在IE中你可以使用

onpropertychange event

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

和Mozilla

你可以使用

watch

观看要分配的媒体资源一个值，然后运行一个函数发生。

Answer 3

您还可以覆盖jQuery的默认show方法：

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

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

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

Answer 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');
});

然而，首先调用回调函数，然后显示/隐藏元素。因此，如果您有一些与相同选择器相关的操作，并且需要在显示或隐藏后进行操作，则临时修复是添加超时几毫秒。

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

4 个答案: