web-dev-qa-db-ja.com

同じ機能をトリガーするためのjQueryの複数のイベント

keyup、keypress、blur、およびchangeイベントが1行で同じ関数を呼び出すようにする方法はありますか、それとも別々に行わなければなりませんか？

私が抱えている問題は、データベース検索でデータを検証する必要があり、それがボックスに入力されているかペーストされているかにかかわらず、検証が見逃されないようにすることです。

jqueryeventsjavascript-events
890
shaneburgess

関数を複数のイベントにバインドするために.on()を使うことができます。

$('#element').on('keyup keypress blur change', function(e) {
    // e.type is the type of event fired
});

あるいは単に通常のイベント関数のパラメータとして関数を渡します。

var myFunction = function() {
   ...
}

$('#element')
    .keyup(myFunction)
    .keypress(myFunction)
    .blur(myFunction)
    .change(myFunction)
1620
Tatu Ulmanen

JQuery 1.7以降、.on()メソッドはイベントハンドラをドキュメントに添付するのに適したメソッドです。以前のバージョンでは、.bind()メソッドはイベントハンドラを直接要素にアタッチするために使用されていました。

$(document).on('mouseover mouseout',".brand", function () {
  $(".star").toggleClass("hovered");
})
54
lesyk

私はjQueryが一度に複数のイベントをリッスンするときにイベントタイプを取得する方法を探していました、そしてGoogleはここに私を置きました。

だから、興味のある人のために、event.typeが私の答えです：

$('#element').on('keyup keypress blur change', function(event) {
    alert(event.type); // keyup OR keypress OR blur OR change
});

jQueryのドキュメント に詳しい情報があります。

43
Alain Tiemblo

bind method を使用して、いくつかのイベントに機能を付加することができます。このコードのようにイベント名とハンドラ関数を渡すだけです。

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

もう1つの選択肢は、jquery apiの連鎖サポートを使用することです。

20
Giorgi

同じイベントハンドラを複数のイベントにアタッチすると、一度に複数のイベントが発生するという問題に遭遇することがよくあります（たとえば、ユーザーが編集後にタブを押すと、キーダウン、変更、およびぼかしがすべて発生する可能性があります）。

それはあなたが実際に欲しいものがこのようなものであるように聞こえます：

$('#ValidatedInput').keydown(function(evt) {
  // If enter is pressed
  if (evt.keyCode === 13) {
    evt.preventDefault();

    // If changes have been made to the input's value, 
    //  blur() will result in a change event being fired.
    this.blur();
  }
});

$('#ValidatedInput').change(function(evt) {
  var valueToValidate = this.value;

  // Your validation callback/logic here.
});
16
Dave Ward

これが私のやり方です。

$("input[name='title']").on({
    "change keyup": function(e) {
        var slug = $(this).val().split(" ").join("-").toLowerCase();
        $("input[name='slug']").val(slug);
    },
});
12
Sajjad Ashraf

以下のように再利用したい関数を定義できます。

var foo = function() {...}

そして、後で示すように、on（ 'event'）を使用してオブジェクトに必要なイベントリスナーを設定し、その関数をトリガーすることができます。

$('#selector').on('keyup keypress blur change paste cut', foo);
11
Coder Of The Galaxy

Tatuによる答えはどうやって直感的にやるかということですが、 .on() メソッドを通して行われていても、イベントをネスト/バインドするというInternet Explorerの問題をいくつか経験しました。

私はこれが問題であるjQueryのどのバージョンを正確に特定することができませんでした。しかし、私は時々次のバージョンで問題を見ます：

  • 2.0.2
  • 1.10.1
  • 1.6.4
  • モバイル1.3.0b1
  • モバイル1.4.2
  • モバイル1.2.0

私の回避策は最初に関数を定義することでした、

function myFunction() {
    ...
}

そしてイベントを個別に処理する

// Call individually due to IE not handling binds properly
$(window).on("scroll", myFunction);
$(window).on("resize", myFunction);

これは最善の解決策ではありませんが、それは私のために動作し、私はこの問題につまずくかもしれない他の人を助けるために私はそれをそこに出すと思いました

6
Squazz
$("element").on("event1 event2 event..n", function() {
   //execution
});

このチュートリアル は複数のイベントを扱うことについてです。

4
Guest

"keyup、keypress、blur、changeの各イベントで1行に同じ関数を呼び出す方法はありますか？"

次の構造体を受け入れる.on()を使用することは可能です。.on( events [, selector ] [, data ], handler )なので、このメソッドに複数のイベントを渡すことができます。あなたの場合は、このようになります。

$('#target').on('keyup keypress blur change', function(e) {
    // "e" is an event, you can detect the type of event using "e.type"
});

そして、これが実例です。

$('#target').on('keyup keypress blur change', function(e) {
  console.log(`"${e.type.toUpperCase()}" event happened`)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="target">
3
Commercial Suicide

JQueryのような大きなライブラリを使わずに組み込みのDOMメソッドを使ってこれを実装するのは簡単です。必要であれば、もう少しコードを書くだけです - イベント名の配列を反復処理し、それぞれにリスナーを追加します。

function validate() {
  // ...
}

const element = document.querySelector('#element');
['keyup', 'keypress', 'blur', 'change'].forEach((eventName) => {
  element.addEventListener(eventName, validate);
});
1
CertainPerformance