Как написать событие onshow, используя javascript / jquery?

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 к телу, чтобы проверить, отображается ли элемент, потому что эти события, скорее всего, вызывают показ элемента и очень часто выполняются пользователем. Это может быть не очень элегантно, но делает работу. Кроме того, после того, как элемент показан, эти события открепляются от тела, чтобы не продолжать стрельбу и замедлять работу.

Answer 2

Вы не можете получить событие onshow непосредственно в JavaScript. Помните, что следующие методы нестандартные .

В IE вы можете использовать

событие onpropertychange

Запускает после свойства элемента изменения

и для Mozilla

вы можете использовать

часы

Следит за назначением свойства значение и запускает функцию, когда это происходит.

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

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

Однако сначала вызывается функция обратного вызова, а затем элемент отображается / скрывается. Поэтому, если у вас есть какая-то операция, связанная с тем же селектором, и ее нужно выполнить после того, как она была показана или скрыта, временное исправление - добавить тайм-аут на несколько миллисекунд.