ฉันยังใหม่กับ JavaScript / jQuery และฉันได้เรียนรู้วิธีสร้างฟังก์ชัน มีฟังก์ชันมากมายที่ครอบตัดด้วย (e) ในวงเล็บ ให้ฉันแสดงความหมาย:
$(this).click(function(e) {
// does something
});
ดูเหมือนว่าฟังก์ชันจะไม่ใช้ค่า (e) ด้วยซ้ำทำไมจึงมีบ่อยครั้ง
คำตอบ:
eคือการอ้างอิง var แบบสั้นสำหรับeventอ็อบเจ็กต์ซึ่งจะถูกส่งผ่านไปยังตัวจัดการเหตุการณ์
โดยพื้นฐานแล้ววัตถุเหตุการณ์มีวิธีการและคุณสมบัติที่น่าสนใจมากมายที่สามารถใช้ในตัวจัดการเหตุการณ์ได้
ในตัวอย่างที่คุณโพสต์คือตัวจัดการคลิกซึ่งเป็นไฟล์ MouseEvent
$(<element selector>).click(function(e) {
// does something
alert(e.type); //will return you click
}
DEMO - Mouse Events DEMO ใช้e.whichและe.type
ข้อมูลอ้างอิงที่เป็นประโยชน์:
http://api.jquery.com/category/events/
http://www.quirksmode.org/js/events_properties.html
http://www.javascriptkit.com/jsref/event.shtml
การปฏิเสธความรับผิด:นี่เป็นการตอบกลับที่ล่าช้ามากสำหรับโพสต์นี้ แต่เนื่องจากฉันได้อ่านคำตอบต่างๆสำหรับคำถามนี้ทำให้ฉันรู้สึกว่าคำตอบส่วนใหญ่ใช้คำศัพท์ที่ผู้เขียนโค้ดที่มีประสบการณ์เท่านั้นที่สามารถเข้าใจได้ คำตอบนี้เป็นความพยายามที่จะตอบคำถามเดิมโดยคำนึงถึงผู้ชมมือใหม่
สิ่งเล็กน้อย ' (e) ' เป็นส่วนหนึ่งของขอบเขตที่กว้างขึ้นของบางสิ่งใน Javascript ที่เรียกว่าฟังก์ชันการจัดการเหตุการณ์ ทุกฟังก์ชันการจัดการเหตุการณ์จะได้รับวัตถุเหตุการณ์ สำหรับจุดประสงค์ของการสนทนานี้ให้คิดว่าวัตถุเป็น "สิ่งของ" ที่มีคุณสมบัติ ( ตัวแปร ) และวิธีการ ( ฟังก์ชัน ) มากมายเหมือนกับออบเจ็กต์ในภาษาอื่น ๆ ที่จับ ' e ' ภายในสิ่งเล็ก ๆ น้อย ๆ(e)เป็นเหมือนตัวแปรที่ช่วยให้คุณโต้ตอบกับวัตถุได้ (และฉันใช้คำว่าตัวแปรแบบหลวม ๆ )
พิจารณาตัวอย่าง jQuery ต่อไปนี้:
$("#someLink").on("click", function(e){ // My preferred method
e.preventDefault();
});
$("#someLink").click(function(e){ // Some use this method too
e.preventDefault();
});
เกิดอะไรขึ้น?
เมื่อผู้ใช้คลิกที่องค์ประกอบที่มี ID "#someLink" (อาจจะแท็กสมอ) เรียกฟังก์ชั่นที่ไม่ระบุชื่อ "ฟังก์ชั่น (จ)"และกำหนดวัตถุที่เกิดขึ้นในการจัดการ,"E" ตอนนี้ใช้ตัวจัดการนั้นและเรียกหนึ่งในวิธีการ "e.preventDefault ()"ซึ่งจะป้องกันไม่ให้เบราว์เซอร์ดำเนินการตามค่าเริ่มต้นสำหรับองค์ประกอบนั้น
หมายเหตุ:แฮนเดิลสามารถตั้งชื่ออะไรก็ได้ที่คุณต้องการ (เช่น ' function (billybob) ') 'e' ย่อมาจาก 'event' ซึ่งดูเหมือนจะค่อนข้างเป็นมาตรฐานสำหรับฟังก์ชันประเภทนี้
แม้ว่า 'e.preventDefault ()' อาจเป็นตัวจัดการเหตุการณ์ที่ใช้บ่อยที่สุด แต่อ็อบเจ็กต์เองก็มีคุณสมบัติและวิธีการมากมายที่สามารถเข้าถึงได้ผ่านตัวจัดการเหตุการณ์
ข้อมูลบางอย่างที่ดีจริงๆในหัวข้อนี้สามารถพบได้ที่เว็บไซต์การเรียนรู้ของ jQuery, http://learn.jquery.com ให้ความสนใจเป็นพิเศษกับการใช้ jQuery หลักและกิจกรรมส่วน
eไม่ได้มีความหมายพิเศษ มันเป็นเพียงการประชุมที่จะใช้เป็นชื่อพารามิเตอร์ของฟังก์ชันเมื่อพารามิเตอร์เป็นeevent
มันสามารถ
$(this).click(function(loremipsumdolorsitamet) {
// does something
}
เช่นกัน.
ในตัวอย่างนั้นeเป็นเพียงพารามิเตอร์สำหรับฟังก์ชันนั้น แต่เป็นeventวัตถุที่ส่งผ่านเข้ามา
eอาร์กิวเมนต์สั้นสำหรับวัตถุเหตุการณ์ ตัวอย่างเช่นคุณอาจต้องการสร้างโค้ดสำหรับจุดยึดที่ยกเลิกการดำเนินการเริ่มต้น ในการทำสิ่งนี้คุณจะต้องเขียนสิ่งที่ต้องการ:
$('a').click(function(e) {
e.preventDefault();
}
ซึ่งหมายความว่าเมื่อมีการ<a>คลิกแท็กให้ป้องกันการทำงานเริ่มต้นของเหตุการณ์การคลิก
แม้ว่าคุณจะเห็นบ่อยครั้ง แต่ก็ไม่ใช่สิ่งที่คุณต้องใช้ภายในฟังก์ชันแม้ว่าคุณจะระบุว่าเป็นอาร์กิวเมนต์ก็ตาม
ใน jQuery eย่อมาeventจากวัตถุเหตุการณ์ปัจจุบัน โดยปกติจะส่งเป็นพารามิเตอร์เพื่อให้ฟังก์ชันเหตุการณ์เริ่มทำงาน
การสาธิต: jQuery Events
ในการสาธิตฉันใช้ e
$("img").on("click dblclick mouseover mouseout",function(e){
$("h1").html("Event: " + e.type);
});
ฉันก็อาจจะใช้ event
$("img").on("click dblclick mouseover mouseout",function(event){
$("h1").html("Event: " + event.type);
});
เหมือนกัน!
โปรแกรมเมอร์ขี้เกียจที่เราใช้ชวเลขมากส่วนหนึ่งมันทำให้งานของเราลดลงส่วนหนึ่งช่วยในเรื่องความสามารถในการอ่าน การทำความเข้าใจนั้นจะช่วยให้คุณเข้าใจความคิดของการเขียนโค้ด
วันนี้ฉันเพิ่งเขียนโพสต์เกี่ยวกับ "ทำไมเราถึงใช้ตัวอักษรเช่น" e "ใน e.preventDefault ()? และฉันคิดว่าคำตอบของฉันจะสมเหตุสมผล ...
ในตอนแรกให้เราดูไวยากรณ์ของ addEventListener
โดยปกติจะเป็น: target.addEventListener (type, listener [, useCapture]);
และคำจำกัดความของพารามิเตอร์ของ addEventlistener คือ:
ประเภท： สตริงที่แสดงถึงประเภทเหตุการณ์ที่จะฟัง
ผู้ฟัง： ออบเจ็กต์ที่ได้รับการแจ้งเตือน (อ็อบเจ็กต์ที่ใช้อินเทอร์เฟซเหตุการณ์) เมื่อเกิดเหตุการณ์ประเภทที่ระบุ ต้องเป็นอ็อบเจ็กต์ที่ใช้อินเทอร์เฟซ EventListener หรือฟังก์ชัน JavaScript
(จาก MDN)
แต่ฉันคิดว่ามีสิ่งหนึ่งที่ควรสังเกต: เมื่อคุณใช้ฟังก์ชัน Javascript เป็นตัวฟังอ็อบเจ็กต์ที่ใช้อินเทอร์เฟซเหตุการณ์ (เหตุการณ์วัตถุ) จะถูกกำหนดให้กับ"พารามิเตอร์แรก"ของฟังก์ชันโดยอัตโนมัติดังนั้นหากคุณใช้ ฟังก์ชัน (e) วัตถุจะถูกกำหนดให้กับ "e" เนื่องจาก "e" เป็นพารามิเตอร์เดียวของฟังก์ชัน (อันแรกแน่นอน!) จากนั้นคุณสามารถใช้ e.preventDefault เพื่อป้องกันบางสิ่ง ....
ให้เราลองดูตัวอย่างด้านล่าง:
<p>Please click on the checkbox control.</p>
<form>
<label for="id-checkbox">Checkbox</label>
<input type="checkbox" id="id-checkbox"/>
</div>
</form>
<script>
document.querySelector("#id-checkbox").addEventListener("click", function(e,v){
//var e=3;
var v=5;
var t=e+v;
console.log(t);
e.preventDefault();
}, false);
</script>
ผลลัพธ์จะเป็น: [object MouseEvent] 5และคุณจะป้องกันไม่ให้เกิดเหตุการณ์คลิก
แต่ถ้าคุณลบเครื่องหมายแสดงความคิดเห็นเช่น:
<script>
document.querySelector("#id-checkbox").addEventListener("click", function(e,v){
var e=3;
var v=5;
var t=e+v;
console.log(t);
e.preventDefault();
}, false);
</script>
คุณจะได้รับ: 8และข้อผิดพลาด : "Uncaught TypeError: e.preventDefault ไม่ใช่ฟังก์ชันที่ HTMLInputElement (VM409: 69)"
แน่นอนว่าเหตุการณ์การคลิกจะไม่สามารถป้องกันได้ในครั้งนี้เนื่องจากมีการกำหนด "e" อีกครั้งในฟังก์ชัน
อย่างไรก็ตามหากคุณเปลี่ยนรหัสเป็น:
<script>
document.querySelector("#id-checkbox").addEventListener("click", function(e,v){
var e=3;
var v=5;
var t=e+v;
console.log(t);
event.preventDefault();
}, false);
</script>
ทุกสิ่งจะทำงานได้อย่างถูกต้องอีกครั้ง ... คุณจะได้รับ8 และเหตุการณ์การคลิกจะถูกป้องกัน ...
ดังนั้น "e" เป็นเพียงพารามิเตอร์ของฟังก์ชันของคุณและคุณต้องมี "e" ในฟังก์ชัน you () เพื่อรับ "วัตถุเหตุการณ์" จากนั้นดำเนินการ e.preventDefault () นี่คือเหตุผลที่คุณสามารถเปลี่ยน "e" เป็นคำใด ๆ ที่ js ไม่ได้จองไว้
เป็นการอ้างอิงถึงวัตถุเหตุการณ์ปัจจุบัน
$(this).click(function(e) {
// does something
});
ในการอ้างอิงถึงโค้ดด้านบน
$(this)คือองค์ประกอบที่เป็นตัวแปรบางตัว
clickคือเหตุการณ์ที่ต้องดำเนินการ
พารามิเตอร์eจะถูกส่งโดยอัตโนมัติจาก js ไปยังฟังก์ชันของคุณซึ่งเก็บค่าของ$(this)ค่าไว้และสามารถใช้เพิ่มเติมในโค้ดของคุณเพื่อดำเนินการบางอย่าง