jQuery複数のイベントで同じ関数をトリガーする

持ってする方法はありますkeyup、keypress、blur、およびchangeイベントは、1行に同じ関数を呼び出すか、私はそれらを個別に行う必要がありますか？

私が抱えている問題は、DBルックアップを使用して一部のデータを検証する必要があり、入力またはボックスへの貼り付けにかかわらず、検証がいずれの場合でも見落とされないようにすることです。

を使用.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)

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

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

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

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

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

詳細については、jQueryドキュメントをご覧ください。

bindメソッドを使用して、複数のイベントに関数をアタッチできます。次のコードのように、イベント名とハンドラー関数を渡すだけです。

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

別のオプションは、jquery apiのチェーンサポートを使用することです。

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

あなたが実際に欲しいのは次のようなものです：

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

これが私のやり方です。

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

次のように、再利用する関数を定義できます。

var foo = function() {...}

その後、オブジェクトに必要なイベントリスナーをいくつでも設定できますが、以下に示すように、on（ 'event'）を使用して、間にスペースを残してその関数をトリガーします。

$('#selector').on('keyup keypress blur change paste cut', foo);

タトゥの答えは、私が直感的にそれを行う.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);

これは最もきれいな解決策ではありませんが、私にとってはうまくいきます。この問題に出くわす可能性のある他の人たちを助けるために、私はそれをそこに出すつもりだったと思いました

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

このチュートリアルは、複数のイベントの処理に関するものです。

持ってする方法はあります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">

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

function validate() {
  // ...
}

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