ฉันจะส่งอาร์กิวเมนต์ไปยังตัวจัดการเหตุการณ์ใน jQuery ได้อย่างไร

ด้วยรหัส jQuery เช่น:

$("#myid").click(myfunction);

function myfunction(arg1, arg2) {/* something */}

ฉันจะส่งอาร์กิวเมนต์ไปmyfunctionยังในขณะที่ใช้ jQuery ได้อย่างไร

วิธีที่ง่ายที่สุดคือทำเช่นนั้น (สมมติว่าคุณไม่ต้องการให้ข้อมูลเหตุการณ์ใด ๆ ส่งผ่านไปยังฟังก์ชัน) ...

$("#myid").click(function() {
    myfunction(arg1, arg2);
});

jsFiddle

สิ่งนี้จะสร้างฟังก์ชันที่ไม่ระบุตัวตนซึ่งถูกเรียกใช้เมื่อclickเหตุการณ์ถูกทริกเกอร์ สิ่งนี้จะเรียกmyfunction()ด้วยอาร์กิวเมนต์ที่คุณระบุ

หากคุณต้องการที่จะให้ThisBinding(ค่าของthisเมื่อฟังก์ชั่นที่มีการเรียกการตั้งค่าเป็นองค์ประกอบที่เรียกเหตุการณ์นี้) call()จากนั้นเรียกใช้ฟังก์ชันที่มี

$("#myid").click(function() {
    myfunction.call(this, arg1, arg2);
});

jsFiddle

คุณไม่สามารถผ่านการอ้างอิงโดยตรงในทางที่รัฐตัวอย่างของคุณหรืออาร์กิวเมนต์เดียวมันจะเป็นjQueryeventวัตถุ

หากคุณไม่ต้องการที่จะผ่านการอ้างอิงที่คุณจะต้องใช้ประโยชน์จากของ jQuery proxy()ฟังก์ชั่น (ซึ่งเป็นเสื้อคลุมเบราว์เซอร์ข้ามFunction.prototype.bind()) นี้จะช่วยให้คุณผ่านการขัดแย้งซึ่งถูกผูกไว้ก่อนeventโต้แย้ง

$("#myid").click($.proxy(myfunction, null, arg1, arg2));   

jsFiddle

ในตัวอย่างนี้myfunction()จะได้รับการดำเนินการที่มีThisBindingเหมือนเดิม ( nullไม่ได้เป็นวัตถุดังนั้นปกติthisมูลค่าขององค์ประกอบที่เรียกเหตุการณ์นี้ถูกนำมาใช้) พร้อมกับการขัดแย้ง (ตามลำดับ) arg1, arg2และในที่สุดก็ jQuery eventวัตถุที่คุณสามารถละเลย ถ้าไม่จำเป็น (อย่าแม้แต่ตั้งชื่อในอาร์กิวเมนต์ของฟังก์ชัน)

คุณยังสามารถใช้ use the jQuery eventobject dataเพื่อส่งผ่านข้อมูลได้ แต่จะต้องมีการแก้ไขmyfunction()เพื่อเข้าถึงผ่านevent.data.arg1(ซึ่งไม่ใช่อาร์กิวเมนต์ของฟังก์ชันเช่นเดียวกับคำถามของคุณที่กล่าวถึง) หรืออย่างน้อยก็แนะนำฟังก์ชันพร็อกซีแบบแมนนวลเหมือนตัวอย่างในอดีตหรือที่สร้างขึ้น โดยใช้ตัวอย่างหลัง

$("#myid").on('click', {arg1: 'hello', arg2: 'bye'}, myfunction);

function myfunction(e) {

    var arg1 = e.data.arg1;
    var arg2 = e.data.arg2;

    alert(arg1);
    alert(arg2);

}

//call method directly:
myfunction({
    arg1: 'hello agian', 
    arg2: 'bye again'
});

ยังช่วยให้คุณสามารถผูกและคลายตัวจัดการเหตุการณ์เฉพาะโดยใช้วิธีการเปิดและปิด

ตัวอย่าง:

$("#myid").off('click', myfunction);

สิ่งนี้จะยกเลิกการเชื่อมตัวจัดการ myfunction จาก #myid

ในขณะที่คุณควรใช้คำตอบของ Alex อย่างแน่นอนวิธีการ "ผูก" ของไลบรารีต้นแบบได้รับการกำหนดมาตรฐานแล้วใน Ecmascript 5 และจะนำไปใช้ในเบราว์เซอร์ในไม่ช้า มันทำงานดังนี้:

jQuery("#myid").click(myfunction.bind(this, arg1, arg2));

กระทู้เก่า แต่เพื่อการค้นหา; ลอง:

$(selector).on('mouseover',...);

... และตรวจสอบพารามิเตอร์ "data": http://api.jquery.com/on/

เช่น:

function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {name: "Karl"}, greet );
$( "button" ).on( "click", {name: "Addy"}, greet );

มีคำตอบที่ดีอยู่แล้ว แต่อย่างไรก็ตามนี่คือสองเซ็นต์ของฉัน คุณยังสามารถใช้:

$("#myid").click({arg1: "foo", arg2: "bar"}, myfunction)

และผู้ฟังจะมีลักษณะดังนี้:

function myfunction(event){ alert(event.data.arg1); alert(event.data.arg2); }

ง่าย:

$(element).on("click", ["Jesikka"],  myHandler);

function myHandler(event){
   alert(event.data);     //passed in "event.data"
}