Как написать событие onshow с помощью javascript / jquery?

У меня есть тег привязки на моей странице, Я хочу, чтобы к нему было прикреплено событие, которое будет срабатывать при изменении отображения этого элемента.

Как я могу написать это событие? и ловить всякий раз, когда меняется отображение этого элемента?

13
dom html javascript javascript-events jquery

4 ответов

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

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

событие onpropertychange

срабатывает после свойства элемента изменения

и для Mozilla

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

посмотреть

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

4

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

15

вы также можете переопределить метод show по умолчанию jQuery:

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

теперь просто привяжите свой код к событию:

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

код из этой ссылки работал для меня: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');
});

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

0