1078

、、、およびイベントを1行keyupで同じ関数を呼び出す方法はありますか、それとも別々に行う必要がありますか？keypressblurchange

私が抱えている問題は、dbルックアップを使用して一部のデータを検証する必要があり、データが入力されているかボックスに貼り付けられているかに関係なく、検証を見逃さないようにする必要があることです。

4

11 に答える 11

1981

.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)
于 2010-03-28T18:56:20.207 に答える
64

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

$(document).on('mouseover mouseout',".brand", function () {
  $(".star").toggleClass("hovered");
})
于 2012-11-14T08:14:41.010 に答える
53

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

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

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

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

于 2013-05-14T22:00:49.290 に答える
26

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

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

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

于 2010-03-28T18:55:40.687 に答える
18

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

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

$('#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.
});
于 2010-03-28T19:33:37.520 に答える
14

これが私のやり方です。

$("input[name='title']").on({
    "change keyup": function(e) {
        var slug = $(this).val().split(" ").join("-").toLowerCase();
        $("input[name='slug']").val(slug);
    },
});
于 2014-11-09T12:46:30.383 に答える
12

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

var foo = function() {...}

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

$('#selector').on('keyup keypress blur change paste cut', foo);
于 2015-04-08T17:51:04.533 に答える
9

、、、、およびイベントが1行keyupで同じ関数を呼び出す方法はありますか？keypressblurchange

.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">

于 2017-09-26T19:16:49.357 に答える
7

Tatuの答えは、私が直感的にそれを行う方法ですが、この方法でイベントをネスト/バインドする方法では、InternetExplorerでいくつかの問題が発生しました.on()。

これが問題となっている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);

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

于 2015-04-07T08:57:03.843 に答える
6 
$("element").on("event1 event2 event..n", function() {
   //execution
});

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

于 2018-04-22T08:47:46.277 に答える
2

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

function validate() {
  // ...
}

const element = document.querySelector('#element');
['keyup', 'keypress', 'blur', 'change'].forEach((eventName) => {
  element.addEventListener(eventName, validate);
});
于 2019-05-21T06:54:13.310 に答える