jQuery's .bind () และ. on ()

ผมพบว่าทั้งสองบทความที่ดีพูดคุยเกี่ยวกับฟังก์ชั่นใหม่.on(): jquery4u.com , elijahmanor.com

มีวิธีที่ใด ๆ.bind()ยังคงดีกว่าที่จะใช้งานกว่า.on()?

ตัวอย่างเช่นฉันมีรหัสตัวอย่างที่มีลักษณะเช่นนี้:

$("#container").click( function( e ) {} )

คุณสามารถทราบได้ว่าฉันเพิ่งมีรายการหนึ่งรายการที่เลือกโดยและในกรณีของฉัน<div>ชื่อที่#containerมีอยู่แล้วเมื่อโหลดหน้าของฉัน ไม่ได้เพิ่มแบบไดนามิก เป็นสิ่งสำคัญที่ต้องกล่าวถึงว่าฉันใช้ jQuery เวอร์ชันล่าสุด: 1.7.2

สำหรับตัวอย่างนั้นควร.on()ใช้แทน.bind()แม้ว่าฉันจะไม่ใช้คุณสมบัติอื่น ๆ ที่มีให้โดย.on()ฟังก์ชั่น?

ภายใน.bindแผนที่โดยตรงกับ.onใน jQuery รุ่นปัจจุบัน (สิ่งเดียวกันจะเป็น.liveเช่นนั้น) ดังนั้นจึงมีประสิทธิภาพการทำงานเพียงเล็กน้อย แต่ไม่สำคัญหากคุณใช้งาน.bindแทน

อย่างไรก็ตาม.bindอาจถูกลบออกจากรุ่นอนาคตได้ตลอดเวลา ไม่มีเหตุผลที่จะใช้ต่อไป.bindและเหตุผลที่ต้องการ.onแทน

ตัวอย่างเหล่านี้ทั้งหมดทำงานในสิ่งเดียวกัน:

element.on('click', function () { ... });
element.bind('click', function () { ... });
element.click(function () { ... });

อย่างไรก็ตามมันแตกต่างจากสิ่งเหล่านี้อย่างมากซึ่งทั้งหมดทำสิ่งเดียวกัน:

element.on('click', 'selector', function () { ... });
element.delegate('click', 'selector', function () { ... });
$('selector').live('click', function () { ... });

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

on()ฟังก์ชั่นของ jQuery ไม่ได้แนะนำฟังก์ชั่นใหม่ใด ๆ ที่ไม่ได้มีอยู่มันเป็นเพียงความพยายามในการสร้างมาตรฐานการจัดการเหตุการณ์ใน jQuery (คุณไม่ต้องตัดสินใจระหว่างการถ่ายทอดสดการเชื่อมโยงหรือการมอบหมาย)

วิธีการโดยตรงและ.delegateเป็น API ที่เหนือกว่า.onและไม่มีเจตนาที่จะเลิกใช้

วิธีการที่ตรงกว่าจะดีกว่าเพราะรหัสของคุณจะพิมพ์อย่างเข้มงวดน้อยลง คุณจะได้รับข้อผิดพลาดทันทีเมื่อคุณพิมพ์ชื่อเหตุการณ์แทนที่จะเป็นข้อบกพร่องแบบเงียบ ในความคิดของฉันมันง่ายกว่าที่จะเขียนและอ่านclickมากกว่าon("click"

.delegateจะดีกว่า.onเพราะการสั่งซื้ออาร์กิวเมนต์ที่:

$(elem).delegate( ".selector", {
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
});

คุณรู้ทันทีว่ามันได้รับมอบหมายเพราะเอาละมันบอกว่าเป็นตัวแทน คุณจะเห็นตัวเลือกทันที

ด้วย.onความที่ไม่ชัดเจนในทันทีหากมีการมอบสิทธิ์และคุณต้องดูที่จุดสิ้นสุดของตัวเลือก:

$(elem).on({
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
}, "selector" );

ตอนนี้การตั้งชื่อเป็นสาหัสจริงๆและเป็นที่มูลค่าเลวร้ายยิ่งกว่า.bind .onแต่.delegateไม่สามารถทำกิจกรรมที่ไม่ได้รับมอบหมายและมีเหตุการณ์ที่ไม่มีวิธีการโดยตรงดังนั้นในกรณีที่หายากเช่นนี้มันสามารถใช้งานได้ แต่เพราะคุณต้องการแยกความสะอาดระหว่างเหตุการณ์ที่มอบหมายและไม่ได้รับมอบหมาย

หากคุณมองหาซอร์สโค้ด$.fn.bindคุณจะพบว่ามันเป็นเพียงฟังก์ชั่นการเขียนซ้ำสำหรับon:

function (types, data, fn) {
    return this.on(types, null, data, fn);
}

http://james.padolsey.com/jquery/#v=1.7.2&fn=$.fn.bind

จากเอกสาร jQuery:

ตั้งแต่ jQuery 1.7 เมธอด. on () เป็นวิธีที่ต้องการสำหรับการแนบตัวจัดการเหตุการณ์กับเอกสาร สำหรับเวอร์ชันก่อนหน้านี้. ผูกวิธี () จะใช้สำหรับการแนบการจัดการเหตุการณ์โดยตรงกับองค์ประกอบ ตัวจัดการจะแนบไปกับองค์ประกอบที่เลือกในปัจจุบันในวัตถุ jQuery ดังนั้นองค์ประกอบเหล่านั้นจะต้องมีอยู่ ณ จุดที่เรียกว่า. ผูก () เกิดขึ้น สำหรับการเชื่อมเหตุการณ์ที่ยืดหยุ่นมากขึ้นให้ดูการอภิปรายของการมอบหมายเหตุการณ์ใน. on () หรือ .delegate ()

http://api.jquery.com/bind/

ตั้งแต่ Jquery 3.0 ขึ้นไป. ผูกได้เลิกใช้แล้วและพวกเขาต้องการใช้. on แทน ตามที่ @Blazemonger ตอบก่อนหน้านี้ว่ามันอาจถูกลบและมันจะถูกลบอย่างแน่นอน สำหรับเวอร์ชันเก่าผูกยังจะโทร. ภายในและไม่มีความแตกต่างระหว่างพวกเขา โปรดดูรายละเอียดเพิ่มเติมจาก api

เอกสารประกอบ jQuery API สำหรับ. ผูก ()