jQuery หลายเหตุการณ์เพื่อเรียกใช้ฟังก์ชันเดียวกัน

มีวิธีที่จะมีkeyup, keypress, blurและchangeเหตุการณ์เรียกใช้ฟังก์ชันเดียวกันในหนึ่งบรรทัดหรือฉันจะต้องทำพวกเขาแยกกัน?

ปัญหาที่ฉันมีคือฉันต้องตรวจสอบความถูกต้องของข้อมูลด้วยการค้นหา 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

คุณสามารถใช้วิธีเชื่อมโยงเพื่อแนบฟังก์ชั่นเข้ากับกิจกรรมต่างๆ เพียงส่งชื่อเหตุการณ์และฟังก์ชั่นการจัดการเช่นเดียวกับในรหัสนี้:

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

และในภายหลังคุณสามารถตั้งค่าได้หลายฟังเหตุการณ์ที่คุณต้องการในวัตถุของคุณเพื่อเรียกใช้ฟังก์ชั่นที่ใช้ใน ('เหตุการณ์') ออกจากช่องว่างในระหว่างที่แสดงด้านล่าง:

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

คำตอบของ Tatu คือวิธีที่ฉันจะทำอย่างสังหรณ์ใจ แต่ฉันประสบปัญหาบางอย่างใน Internet Explorer ด้วยวิธีนี้ในการทำรัง / ผูกเหตุการณ์แม้ว่ามันจะทำผ่าน.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);

นี่ไม่ใช่ทางออกที่สวยที่สุด แต่ใช้ได้สำหรับฉันและฉันคิดว่าฉันจะเอามันไปช่วยเหลือผู้อื่นที่อาจสะดุดกับปัญหานี้

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

บทช่วยสอนนี้เกี่ยวกับการจัดการหลายเหตุการณ์

มีวิธีที่จะมีkeyup, keypress, blurและchangeเหตุการณ์เรียกใช้ฟังก์ชันเดียวกันในหนึ่งบรรทัด?

เป็นไปได้ที่จะใช้.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">

มันง่ายที่จะใช้สิ่งนี้กับวิธี DOM ที่มีอยู่ภายในโดยไม่มีไลบรารี่ขนาดใหญ่เช่น jQuery ถ้าคุณต้องการก็แค่ใช้โค้ดเพิ่มอีกนิดหน่อย - วนซ้ำชื่ออาร์เรย์ของเหตุการณ์และเพิ่ม listener สำหรับแต่ละตัว:

function validate() {
  // ...
}

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