web-dev-qa-db-ja.com

javascript / jqueryを使用してonshowイベントを作成するにはどうすればよいですか？

ページにアンカータグがあり、この要素の表示が変更されたときに発生するイベントを添付したいと思います。

このイベントを作成するにはどうすればよいですか？この要素の表示が変わるたびにキャッチしますか？

javascriptjqueryhtmldomjavascript-events
14
Amr Elgarhy

JavaScriptで直接onshowイベントを取得することはできません。次のメソッドは非標準であることを忘れないでください。

IN IE使用できます

onpropertychange event

要素のプロパティが変更された後に発生します

そしてMozillaの場合

あなたが使用することができます

watch

プロパティに値が割り当てられるのを監視し、それが発生すると関数を実行します。

4
rahul

これは、jQueryプラグインとしてのonShowでの私のやり方です。ただし、実行していることを正確に実行する場合と実行しない場合があります。

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

これは、クリック、キーアップ、およびキーダウンイベントを本体にバインドして、要素が表示されているかどうかを確認することで機能します。これらのイベントは、要素が表示される可能性が最も高く、ユーザーによって非常に頻繁に実行されるためです。これは非常にエレガントではないかもしれませんが、仕事を成し遂げます。また、要素が表示されると、これらのイベントは、発火を続けてパフォーマンスを低下させないように、ボディからバインド解除されます。

15
anson

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

このリンクからのコードは私のために働いた： 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
Sagar Gala