jQuery: มีตัวจัดการมากกว่าหนึ่งตัวสำหรับเหตุการณ์เดียวกัน

จะเกิดอะไรขึ้นถ้าฉันผูกตัวจัดการเหตุการณ์สองตัวกับเหตุการณ์เดียวกันสำหรับองค์ประกอบเดียวกัน

ตัวอย่างเช่น:

var elem = $("...")
elem.click(...);
elem.click(...);

ตัวจัดการล่าสุด "ชนะ" หรือตัวจัดการทั้งสองจะทำงานหรือไม่

ตัวจัดการทั้งสองจะทำงานรูปแบบเหตุการณ์ jQuery อนุญาตให้มีหลายตัวจัดการในองค์ประกอบเดียวดังนั้นตัวจัดการในภายหลังจะไม่แทนที่ตัวจัดการรุ่นเก่า

ตัวจัดการจะดำเนินการในลำดับที่พวกเขาถูกผูกไว้

สมมติว่าคุณมีตัวจัดการสองตัวคือfและgและต้องการตรวจสอบให้แน่ใจว่าพวกมันจะถูกดำเนินการในลำดับที่เป็นที่รู้จักและแน่นอนจากนั้นเพียงแค่แค็ปซูล:

$("...").click(function(event){
  f(event);
  g(event);
});

ด้วยวิธีนี้มี (จากมุมมองของ jQuery) เพียงหนึ่งตัวจัดการซึ่งเรียกfและgในลำดับที่ระบุ

jQuery's .bind () ยิงตามลำดับที่ถูกผูกไว้ :

เมื่อเหตุการณ์มาถึงองค์ประกอบตัวจัดการทั้งหมดที่ถูกผูกไว้กับประเภทเหตุการณ์นั้นสำหรับองค์ประกอบจะถูกไล่ออก หากมีตัวจัดการหลายตัวที่ลงทะเบียนพวกเขาจะดำเนินการตามลำดับที่ถูกผูกไว้ หลังจากตัวจัดการทั้งหมดได้ดำเนินการแล้วเหตุการณ์จะดำเนินต่อไปตามเส้นทางการเผยแพร่เหตุการณ์ปกติ

ที่มา: http://api.jquery.com/bind/

เนื่องจากฟังก์ชั่นอื่น ๆ ของ jQuery (เช่น.click()) เป็นทางลัดสำหรับ.bind('click', handler)ฉันจะเดาได้ว่าพวกมันจะถูกเรียกตามลำดับที่ถูกผูกไว้

คุณควรจะสามารถใช้การโยงเพื่อดำเนินกิจกรรมตามลำดับเช่น:

$('#target')
  .bind('click',function(event) {
    alert('Hello!');
  })
  .bind('click',function(event) {
    alert('Hello again!');
  })
  .bind('click',function(event) {
    alert('Hello yet again!');
  });

ฉันเดาว่าโค้ดด้านล่างทำเช่นเดียวกัน

$('#target')
      .click(function(event) {
        alert('Hello!');
      })
      .click(function(event) {
        alert('Hello again!');
      })
      .click(function(event) {
        alert('Hello yet again!');
      });

ที่มา: http://www.peachpit.com/articles/article.aspx?p=1371947&seqNum=3

TFMยังพูดว่า:

เมื่อเหตุการณ์มาถึงองค์ประกอบตัวจัดการทั้งหมดที่ถูกผูกไว้กับประเภทเหตุการณ์นั้นสำหรับองค์ประกอบจะถูกไล่ออก หากมีตัวจัดการหลายตัวที่ลงทะเบียนพวกเขาจะดำเนินการตามลำดับที่ถูกผูกไว้ หลังจากตัวจัดการทั้งหมดได้ดำเนินการแล้วเหตุการณ์จะดำเนินต่อไปตามเส้นทางการเผยแพร่เหตุการณ์ปกติ

ตัวจัดการทั้งสองจะถูกเรียก

คุณอาจกำลังคิดถึงการโยงเหตุการณ์แบบอินไลน์ (เช่น"onclick=...") ซึ่งข้อเสียเปรียบครั้งใหญ่เป็นเพียงตัวจัดการเดียวเท่านั้นที่อาจถูกตั้งค่าไว้สำหรับเหตุการณ์

jQuery เป็นไปตามรูปแบบการลงทะเบียนเหตุการณ์ DOM ระดับ 2 :

รูปแบบเหตุการณ์ DOM ช่วยให้การลงทะเบียนของ Event Event หลายเครื่องบน EventTarget เดียว เพื่อให้บรรลุสิ่งนี้ผู้ฟังเหตุการณ์จะไม่ได้รับการจัดเก็บเป็นค่าแอตทริบิวต์อีกต่อไป

ทำให้การทำงานสำเร็จเป็นผลสำเร็จโดยใช้วิธีการ 2 วิธี: การห่อหุ้มของ Stephan202 และผู้ฟังเหตุการณ์หลายรายการ ฉันมี 3 แท็บการค้นหาลองกำหนด id ของพวกเขาใน Array:

var ids = new Array("searchtab1", "searchtab2", "searchtab3");

เมื่อเนื้อหาของ searchtab1 เปลี่ยนไปฉันต้องการอัปเดต searchtab2 และ searchtab3 มันเป็นวิธีการห่อหุ้ม:

for (var i in ids) {
    $("#" + ids[i]).change(function() {
        for (var j in ids) {
            if (this != ids[j]) {
                $("#" + ids[j]).val($(this).val());
            }
        }
    });
}

ผู้ฟังเหตุการณ์หลายรายการ:

for (var i in ids) {
    for (var j in ids) {
        if (ids[i] != ids[j]) {
            $("#" + ids[i]).change(function() {
                $("#" + ids[j]).val($(this).val());
            });
        }
    }
}

ฉันชอบทั้งสองวิธี แต่โปรแกรมเมอร์เลือก encapsulation แต่ผู้ฟังเหตุการณ์หลายคนก็ทำงานเช่นกัน เราใช้ Chrome เพื่อทดสอบ

มีวิธีแก้ปัญหาเพื่อรับประกันว่าตัวจัดการหนึ่งเกิดขึ้นหลังจากที่อื่น: แนบตัวจัดการที่สองกับองค์ประกอบที่ประกอบด้วยและปล่อยให้เหตุการณ์ฟองขึ้น ในตัวจัดการที่แนบกับคอนเทนเนอร์คุณสามารถดูที่ event.target และทำอะไรถ้ามันเป็นสิ่งที่คุณสนใจ

อาจจะดิบ แต่มันควรจะใช้ได้แน่นอน

jquery จะดำเนินการตัวจัดการทั้งสองเพราะมันช่วยให้หลายตัวจัดการเหตุการณ์ ฉันได้สร้างรหัสตัวอย่าง คุณสามารถลอง

การสาธิต