jQuery.click () vs onClick

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

วิธีแรก

HTML

<div id="myDiv">Some Content</div>

jQuery

$('#myDiv').click(function(){
    //Some code
});

วิธีที่สอง

HTML

<div id="myDiv" onClick="divFunction()">Some Content</div>

การเรียกใช้ฟังก์ชัน JavaScript

function divFunction(){
    //Some code
}

ฉันใช้วิธีแรกหรือวิธีที่สองในแอปพลิเคชันของฉัน อันไหนดีกว่า? ดีกว่าสำหรับประสิทธิภาพ? และมาตรฐาน?

ใช้$('#myDiv').click(function(){เป็นที่ดีกว่าในขณะที่มันเป็นไปตามรูปแบบการลงทะเบียนเหตุการณ์มาตรฐาน (jQuery ใช้ภายในaddEventListenerและattachEvent)

โดยทั่วไปการลงทะเบียนเหตุการณ์ด้วยวิธีการที่ทันสมัยเป็นวิธีที่ไม่สร้างความรำคาญในการจัดการเหตุการณ์ นอกจากนี้ในการลงทะเบียนมากกว่าหนึ่งฟังเหตุการณ์สำหรับเป้าหมายที่คุณสามารถโทรaddEventListener()หาเป้าหมายเดียวกัน

var myEl = document.getElementById('myelement');

myEl.addEventListener('click', function() {
    alert('Hello world');
}, false);

myEl.addEventListener('click', function() {
    alert('Hello world again!!!');
}, false);

http://jsfiddle.net/aj55x/1/

ทำไมต้องใช้ addEventListener (จาก MDN)

addEventListener เป็นวิธีการลงทะเบียนฟังเหตุการณ์ตามที่ระบุใน W3C DOM มันมีประโยชน์ดังนี้:

• อนุญาตให้เพิ่มมากกว่าตัวจัดการเดียวสำหรับเหตุการณ์ สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับไลบรารี DHTML หรือส่วนขยาย Mozilla ที่จำเป็นต้องใช้งานได้ดีแม้ว่าจะใช้งานไลบรารี / ส่วนขยายอื่น ๆ
• มันช่วยให้คุณควบคุมเฟสอย่างละเอียดยิ่งขึ้นเมื่อผู้ฟังเปิดใช้งาน (การจับภาพกับการเดือดปุด ๆ )
• มันทำงานได้กับองค์ประกอบ DOM ใด ๆ ไม่เพียง แต่องค์ประกอบ HTML

เพิ่มเติมเกี่ยวกับการลงทะเบียนเหตุการณ์สมัยใหม่ -> http://www.quirksmode.org/js/events_advanced.html

วิธีอื่น ๆ เช่นการตั้งค่าคุณลักษณะ HTMLตัวอย่าง:

<button onclick="alert('Hello world!')">

หรือคุณสมบัติองค์ประกอบ DOMตัวอย่าง:

myEl.onclick = function(event){alert('Hello world');}; 

เก่าและสามารถเขียนทับได้ง่าย

ควรหลีกเลี่ยงแอตทริบิวต์ HTMLเนื่องจากทำให้มาร์กอัปมีขนาดใหญ่ขึ้นและอ่านได้น้อยลง ความกังวลเกี่ยวกับเนื้อหา / โครงสร้างและพฤติกรรมนั้นไม่ได้แยกจากกันทำให้เกิดข้อผิดพลาดในการค้นหา

ปัญหาเกี่ยวกับวิธีการคุณสมบัติองค์ประกอบ DOMคือตัวจัดการเหตุการณ์หนึ่งตัวเท่านั้นที่สามารถเชื่อมโยงกับองค์ประกอบต่อเหตุการณ์

เพิ่มเติมเกี่ยวกับการจัดการเหตุการณ์แบบดั้งเดิม -> http://www.quirksmode.org/js/events_tradmod.html

การอ้างอิง MDN: https://developer.mozilla.org/en-US/docs/DOM/event

เพื่อประสิทธิภาพที่ดีขึ้นให้ใช้ JavaScript ดั้งเดิม เพื่อการพัฒนาที่รวดเร็วยิ่งขึ้นให้ใช้ jQuery ตรวจสอบการเปรียบเทียบผลการดำเนินงานที่jQuery VS สมรรถนะของธาตุพื้นเมือง

ฉันได้ทำการทดสอบใน Firefox 16.0 32 บิตบน Windows Server 2008 R2 / 7 64 บิตแล้ว

$('span'); // 6,604 operations per second
document.getElementsByTagName('span'); // 10,331,708 operations/sec

สำหรับเหตุการณ์การคลิกให้ตรวจสอบเหตุการณ์เบราว์เซอร์เนทีฟเทียบกับทริกเกอร์ jqueryหรือjQuery กับการคลิกที่การเชื่อมโยงเหตุการณ์เนทิฟ

การทดสอบใน Chrome 22.0.1229.79 32 บิตบน Windows Server 2008 R2 / 7 64- บิต

$('#jquery a').click(window.testClickListener); // 2,957 operations/second

[].forEach.call( document.querySelectorAll('#native a'), function(el) {
    el.addEventListener('click', window.testClickListener, false);
}); // 18,196 operations/second

จากสิ่งที่ฉันเข้าใจคำถามของคุณไม่เกี่ยวกับว่าจะใช้ jQuery หรือไม่ มันค่อนข้าง: มันจะดีกว่าที่จะผูกเหตุการณ์แบบอินไลน์ใน HTML หรือผ่านผู้ฟังเหตุการณ์?

การรวมแบบอินไลน์ถูกคัดค้าน ยิ่งไปกว่านั้นวิธีนี้คุณสามารถผูกฟังก์ชันเดียวกับเหตุการณ์บางอย่างได้เท่านั้น

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

querySelector('#myDiv').addEventListener('click', function () {
    // Some code...
});

สิ่งนี้ใช้ได้กับเบราว์เซอร์ที่ทันสมัยที่สุด

อย่างไรก็ตามหากคุณมี jQuery อยู่ในโครงการแล้ว - ใช้ jQuery: .onหรือ.clickfunction

คุณสามารถรวมพวกเขาใช้ jQuery เพื่อผูกฟังก์ชั่นการคลิก

<div id="myDiv">Some Content</div>

$('#myDiv').click(divFunction);

function divFunction(){
 //some code
}

$('#myDiv').clickจะดีกว่าเพราะมันแยกรหัส JavaScript จากHTML หนึ่งจะต้องพยายามที่จะให้หน้าพฤติกรรมที่แตกต่างกันและโครงสร้าง สิ่งนี้ช่วยได้มาก

ไปสำหรับสิ่งนี้เพราะมันจะให้ทั้งมาตรฐานและประสิทธิภาพ

 $('#myDiv').click(function(){
      //Some code
 });

ในขณะที่วิธีที่สองคือรหัส JavaScript ที่ง่ายและเร็วกว่า jQuery แต่ประสิทธิภาพที่นี่จะใกล้เคียงกัน

IMHO, onclick เป็นวิธีการที่ต้องการมากกว่าคลิกเฉพาะเมื่อตรงตามเงื่อนไขต่อไปนี้:

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

ฉันสร้างความคิดเห็นนี้เนื่องจากความจริงที่ว่าเอนจิ้น JavaScript บนอุปกรณ์มือถือนั้นช้ากว่ารุ่นเดสก์ท็อปของพวกเขาถึง 4 ถึง 7 เท่าซึ่งสร้างขึ้นในรุ่นเดียวกัน ฉันเกลียดเมื่อฉันเยี่ยมชมเว็บไซต์บนอุปกรณ์มือถือของฉันและได้รับการเลื่อนแบบกระวนกระวายใจเพราะ jQuery ผูกพันเหตุการณ์ทั้งหมดโดยเสียค่าใช้จ่ายจากประสบการณ์การใช้งานและอายุการใช้งานแบตเตอรี่ของฉัน ปัจจัยสนับสนุนล่าสุดเมื่อไม่นานมานี้แม้ว่าจะน่ากังวลกับหน่วยงานของรัฐเท่านั้น) เรามี IE7 ป๊อปอัปพร้อมกล่องข้อความระบุว่ากระบวนการ JavaScript ใช้เวลานาน ... รอหรือยกเลิกกระบวนการ สิ่งนี้เกิดขึ้นทุกครั้งที่มีองค์ประกอบมากมายที่ต้องผูกผ่าน jQuery

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

การสาธิต

HTML

<span id="JQueryClick">Click #JQuery</span> </br>
<span id="JQueryAttrClick">Click #Attr</span> </br>

JavaScript

$('#JQueryClick').click(function(){alert('1')})
$('#JQueryClick').click(function(){alert('2')})

$('#JQueryAttrClick').attr('onClick'," alert('1')" ) //This doesn't work
$('#JQueryAttrClick').attr('onClick'," alert('2')" )

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

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

อย่างไรก็ตามอย่าทิ้งความคิดที่จะเปิดเผยมาร์กอัปเร็วเกินไป มันมีสถานที่และกรอบเช่น Angularjs เป็นศูนย์กลาง

จำเป็นต้องมีความเข้าใจว่าสิ่งเหล่า<div id="myDiv" onClick="divFunction()">Some Content</div>นั้นได้รับความอับอายอย่างหนักเพราะนักพัฒนาบางรายถูกทารุณกรรม tablesดังนั้นจึงถึงจุดของสัดส่วนร้ายกาจเหมือน นักพัฒนาบางคนจริงหลีกเลี่ยงtablesสำหรับข้อมูลตาราง มันเป็นตัวอย่างที่สมบูรณ์แบบของคนที่แสดงโดยที่ไม่เข้าใจ

แม้ว่าฉันจะชอบความคิดที่ทำให้พฤติกรรมของฉันแยกจากมุมมองของฉัน ฉันไม่เห็นปัญหาใด ๆ กับมาร์กอัปที่ประกาศว่ามันทำอะไร (ไม่เป็นอย่างไรมันเป็นพฤติกรรม) มันอาจจะอยู่ในรูปแบบของแอตทริบิวต์ onClick จริงหรือแอตทริบิวต์ที่กำหนดเองเช่นส่วนประกอบ javascript bootstraps

ด้วยวิธีนี้คุณสามารถดูสิ่งที่ทำอยู่แทนที่จะมองมาร์กอัปตัวเชื่อมโยงเหตุการณ์จาวาสคริปต์

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

ตัวอย่าง Bootstrap:

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

ที่มา: http://getbootstrap.com/javascript/#popovers

หมายเหตุข้อเสียเปรียบหลักกับตัวอย่างที่สองคือมลภาวะของเนมสเปซส่วนกลาง สิ่งนี้สามารถหลีกเลี่ยงได้โดยใช้ทางเลือกที่สามด้านบนหรือกรอบงานเช่น Angular และแอตทริบิวต์ ng-click ที่มีขอบเขตโดยอัตโนมัติ

ไม่มีใครดีไปกว่าการใช้เพื่อวัตถุประสงค์ที่แตกต่างกัน onClick(ควรเป็นจริงonclick) มีประสิทธิภาพดีกว่าเล็กน้อย แต่ฉันสงสัยอย่างมากว่าคุณจะสังเกตเห็นความแตกต่างที่นั่น

เป็นที่น่าสังเกตว่าพวกเขาทำสิ่งต่าง ๆ : .clickสามารถผูกกับคอลเลกชัน jQuery ใด ๆ ในขณะที่onclickจะต้องมีการใช้แบบอินไลน์ในองค์ประกอบที่คุณต้องการที่จะผูกพัน คุณสามารถผูกเหตุการณ์เดียวเท่านั้นที่จะใช้onclickในขณะที่.clickช่วยให้คุณสามารถผูกเหตุการณ์ต่อไป

ในความคิดของฉันฉันจะสอดคล้องกับมันและเพียงแค่ใช้.clickทุกที่และเก็บรหัส JavaScript ของฉันทั้งหมดไว้ด้วยกันและแยกออกจาก HTML

onclickอย่าใช้ ไม่มีเหตุผลที่จะใช้มันนอกจากว่าคุณรู้ว่าคุณกำลังทำอะไรอยู่

<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />

onclick, onmouseover, onmouseout, ฯลฯเหตุการณ์จริง ๆ แล้วไม่ดีสำหรับประสิทธิภาพ (ในInternet Explorerส่วนใหญ่ไปคิด) หากคุณใช้รหัสVisual Studioเมื่อคุณเรียกใช้เพจด้วยสิ่งเหล่านี้แต่ละอันจะสร้างบล็อก SCRIPT แยกกันเพื่อรับหน่วยความจำและทำให้ประสิทธิภาพลดลง

ไม่พูดถึงคุณควรแยกความกังวล : JavaScript และเค้าโครงควรแยก!

มันจะดีกว่าเสมอในการสร้างแม้กระทั่งแฮนเดอร์สำหรับกิจกรรมเหล่านี้กิจกรรมหนึ่งสามารถจับรายการนับแสนรายการแทนที่จะสร้างบล็อกสคริปต์แยกกันนับพันรายการสำหรับแต่ละรายการ!

(นอกจากนี้ทุกสิ่งที่คนอื่นพูด)

ดีหนึ่งในความคิดหลักที่อยู่เบื้องหลังjQueryคือการแยก JavaScript จากขื่นHTMLรหัส วิธีแรกคือวิธีที่จะไป

ส่วนใหญ่แล้ววิธีการดั้งเดิมของ JavaScript นั้นเป็นตัวเลือกที่ดีกว่า jQuery เมื่อประสิทธิภาพเป็นเกณฑ์เพียงอย่างเดียว แต่ jQuery ใช้ประโยชน์จาก JavaScript และทำให้การพัฒนาง่ายขึ้น คุณสามารถใช้ jQuery ได้เพราะไม่ทำให้ประสิทธิภาพการทำงานลดลงมากเกินไป ในกรณีเฉพาะของคุณความแตกต่างของประสิทธิภาพนั้นไม่อาจเพิกเฉยได้

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

ส่วนตัวเนื่องจากคุณใช้ jQuery ฉันจะติดกับมันเพราะมันสอดคล้องและ decouple มาร์กอัปจากสคริปต์

วิธีแรกคือการชอบ มันใช้รูปแบบการลงทะเบียนเหตุการณ์ขั้นสูง [s]ซึ่งหมายความว่าคุณสามารถแนบหลายตัวจัดการกับองค์ประกอบเดียวกัน คุณสามารถเข้าถึงวัตถุเหตุการณ์ได้อย่างง่ายดายและตัวจัดการสามารถอยู่ในขอบเขตของฟังก์ชันใดก็ได้ นอกจากนี้มันยังเป็นแบบไดนามิกเช่นสามารถเรียกใช้ได้ตลอดเวลาและเหมาะอย่างยิ่งสำหรับองค์ประกอบที่สร้างขึ้นแบบไดนามิก ไม่ว่าคุณจะใช้ jQuery ห้องสมุดอื่น ๆ หรือวิธีดั้งเดิมนั้นไม่สำคัญเลย

วิธีที่สองโดยใช้คุณสมบัติแบบอินไลน์ต้องการฟังก์ชั่นระดับโลกจำนวนมาก (ซึ่งนำไปสู่มลพิษในเนมสเปซ) และผสมเนื้อหา / โครงสร้าง (HTML) กับพฤติกรรม (JavaScript) อย่าใช้มัน

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

ฟังก์ชั่น Onclick Jquery

$('#selector').click(function(){ //Your Functionality });