jQuery aynı işlevi tetiklemek için birden fazla olay

İçin bir yolu var mı keyup, keypress, blur, ve changeolaylar tek satırda aynı işlevi çağırmak ya da ben bunları ayrı ayrı yapmak gerekiyor?

Ben sorun bir db araması ile bazı verileri doğrulamak gerekir ve ister yazılı ister kutuya yapıştırılmış olsun, her durumda doğrulama kaçırılmadığından emin olmak istiyorum olmasıdır.

.on()Bir işlevi birden çok olaya bağlamak için kullanabilirsiniz :

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

Veya işlevi normal olay işlevlerine parametre olarak iletin:

var myFunction = function() {
   ...
}

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

JQuery 1.7'den itibaren .on()yöntem, olay işleyicilerini bir belgeye eklemek için tercih edilen yöntemdir. Önceki sürümlerde, .bind()yöntem bir olay işleyicisini doğrudan öğelere eklemek için kullanılır.

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

JQuery aynı anda birkaç etkinliği dinlediğinde etkinlik türünü almanın bir yolunu arıyordum ve Google beni buraya koydu.

İlgilenenler için event.typecevabım:

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

JQuery belgesinde daha fazla bilgi .

Birkaç olaya işlev eklemek için bind yöntemini kullanabilirsiniz . Olay adlarını ve işleyici işlevini bu koddaki gibi iletmeniz yeterlidir:

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

Başka bir seçenek, jquery api'nin zincirleme desteğini kullanmaktır.

Aynı olay işleyicisini birkaç olaya eklerseniz, çoğu zaman aynı anda birden fazla tetikleme sorunuyla karşılaşırsınız (örneğin, düzenleme sonrasında kullanıcı sekmeye basar; tuşlar, değiştirme ve bulanıklaştırma tümüyle tetiklenebilir).

Aslında istediğiniz gibi bir şey gibi geliyor:

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

Ben böyle yapıyorum.

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

Yeniden kullanmak istediğiniz işlevi aşağıdaki gibi tanımlayabilirsiniz:

var foo = function() {...}

Ve daha sonra, aşağıda gösterildiği gibi arada bir boşluk bırakarak on ('event') kullanarak nesnenizde bu işlevi tetiklemesini istediğiniz birçok olay dinleyicisini ayarlayabilirsiniz:

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

Tatu'nun cevabı sezgisel olarak nasıl yapacağımdır, ancak yöntemle yapılsa bile, olayları iç içe yerleştirme / bağlama yolu ile Internet Explorer'da bazı sorunlar yaşadım .on().

Bu sorunun tam olarak hangi jQuery sürümlerini tam olarak saptamayı başaramadım. Ancak bazen sorunu aşağıdaki sürümlerde görüyorum:

• 2.0.2
• 1.10.1
• 1.6.4
• Cep 1.3.0b1
• Cep 1.4.2
• Cep 1.2.0

Geçici çözümüm önce işlevi tanımlamaktı,

function myFunction() {
    ...
}

ve olayları tek tek ele alın

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

Bu en güzel çözüm değil, ama benim için çalışıyor ve bu konuda yanıltabilecek başkalarına yardım etmek için oraya koyacağımı düşündüm.

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

Bu eğitici , birden fazla etkinliği işleme hakkındadır.

İçin bir yolu var mı keyup, keypress, blur, ve changeolaylar tek satırda aynı işlevi çağırmak?

.on()Aşağıdaki yapıyı kabul eden aşağıdakileri kullanmak mümkündür : .on( events [, selector ] [, data ], handler )böylece bu yönteme birden fazla olay iletebilirsiniz. Sizin durumunuzda şöyle görünmelidir:

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

Ve işte canlı örnek:

$('#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">

Bunu jQuery gibi büyük bir kütüphane olmadan yerleşik DOM yöntemleriyle uygulamak kolaydır, isterseniz biraz daha fazla kod alır - bir dizi olay adı üzerinde yineleyin ve her biri için bir dinleyici ekleyin:

function validate() {
  // ...
}

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