การทดสอบรหัส:
การคัดลอกรหัสมีดังนี้:
<div id = "ทดสอบ"> <p> ข้อความทดสอบ <p> </div>
<script src = "ผู้ขาย/jQuery-2.1.1.js"> </script>
<script>
test.addeventListener ('คลิก', ฟังก์ชั่น (e) {console.log (e);}, false),
$ ('#test'). on ('คลิก', ฟังก์ชั่น (e) {console.log (e)});
</script>
การวิเคราะห์ผลลัพธ์:
การคัดลอกรหัสมีดังนี้:
js-jq-event-common: {
Altkey: เท็จ
ฟอง: จริง
ปุ่ม: 0,
ยกเลิกได้: จริง
clientx: 58,
ลูกค้า: 13,
ctrlkey: เท็จ
Offsetx: 50,
อวกาศ: 5,
Pagex: 58,
หน้า: 13,
ScreenX: 58
หน้าจอ: 122,
ดู: หน้าต่าง
ซึ่ง: 1,
พิมพ์: 'คลิก',
การประทับเวลา: 1407761742842
Metakey: เท็จ
ที่เกี่ยวข้องเป้าหมาย: null,
เป้าหมาย: เป้าหมายของ Div#Test /*JQ-EVT ไม่จำเป็นต้องเป็นองค์ประกอบที่ตรงกับตัวเลือก jQuery มันอาจเป็นองค์ประกอบแรกที่จับเหตุการณ์และจากนั้นเดือดขึ้นไปหนึ่งในนั้นคือองค์ประกอบที่ตรงกับตัวเลือก* /
-
JS-JQ-EVENT-DIFF: {
currentTarget: null/*ดูเหมือนว่ามันมักจะเป็นโมฆะ*/
- div#test/*jq selector ตรงกับองค์ประกอบในแอตทริบิวต์ [currenttarget]*/,
EventPhase: 0 || 2,
ToElement: Div#ทดสอบ
-
JS-Event-Solo: {
x: 58
y: 13,
CancelBubble: FALSE,
Charcode: 0,
ClipboardData: ไม่ได้กำหนด
dataTransfer: null,
เริ่มต้นก่อน: เท็จ
SRCELEMENT: การทดสอบ DIV#
From -lement: null,
รายละเอียด: 1,
ปุ่มกด: 0,
Layerx: 58,
Layery: 13,
returnValue: จริง
-
jq-event-solo: {
ปุ่ม: ไม่ได้กำหนด
ข้อมูล: ไม่ได้กำหนด
DelegAtetArget: Div#Test/*ใครกำลังฟัง? นั่นคือองค์ประกอบ -
isdefaultprevented: ฟังก์ชั่น,
handleobj: วัตถุ
jQuery211024030584539286792: จริง
OriginalEvent: MouseEvent,
ShiftKey: FALSE
-
คลิกที่ตัวตน
currenttarget: htmlbodyelement,
Delegatetarget: htmlbodyelement,
เป้าหมาย: htmldivelement
-
สรุป:
ในพารามิเตอร์เหตุการณ์ของ JS ไม่ว่าจะเป็นเป้าหมาย, toelement และ srcelement พวกเขาชี้ไปที่องค์ประกอบแรกที่กระตุ้นเหตุการณ์ (ยังไม่เดือดปุด ๆ ) และจากการเลือกตั้งเป็นโมฆะในเหตุการณ์การคลิก ดังนั้นหากคุณตั้งค่าเหตุการณ์หลักด้วยองค์ประกอบจำนวนมากเหตุการณ์ทริกเกอร์น่าจะเป็นองค์ประกอบลูกของผู้ปกครองนี้
ดังนั้นในแอปพลิเคชันจริงหากคุณต้องการอ้างอิงผู้ปกครองคุณสามารถใช้สิ่งนี้ได้เท่านั้น
ในพารามิเตอร์เหตุการณ์ของ JQ
CurrentTarget เป็นองค์ประกอบที่ตรงกับตัวเลือกของคุณซึ่งเป็นองค์ประกอบที่คุณต้องการ
DelegAtetarget เป็นองค์ประกอบที่กำลังฟังเหตุการณ์และเป็นขององค์ประกอบที่ได้รับมอบหมาย
เป้าหมายในพารามิเตอร์เหตุการณ์ของ JS เดียวกันคือองค์ประกอบแรกที่กระตุ้นเหตุการณ์และมันไม่ได้มีประโยชน์เท่ากับ CurrentTarget (ไม่จำเป็นเช่นแอปพลิเคชันในเหตุการณ์ BodyClick)
นักเรียนบางคนอาจบอกว่าคุณต้องอ้างอิงองค์ประกอบของเหตุการณ์อุปกรณ์โดยตรงและใช้สิ่งนี้ ทำไมถึงเข้าใจ CurrentTarget และ Target? ความคิดนี้พิสูจน์ให้เห็นว่าคุณเพิ่งใช้ jQuery และไม่เคยใช้เครื่องมือเช่น Backbone
กระดูกสันหลังผูกสิ่งนี้ในหลาย ๆ ที่ดังนั้นการใช้สิ่งนี้ในฟังก์ชั่นของมันจึงเป็นไปไม่ได้:
การคัดลอกรหัสมีดังนี้:
var view = backbone.view.extend ({
El: document.body,
กิจกรรม: {
'คลิก P': 'ShowText' // มอบหมายตัวตนเพื่อฟังเหตุการณ์คลิกของ P}
ShowText: function (e) {
var p = e.currenttarget; // [currenttarget] รับองค์ประกอบที่ตรงกับตัวเลือก this.log (p.innerhtml); // ฉันเห็นมันนี่ไม่ได้ชี้ไปที่องค์ประกอบ p}
บันทึก: ฟังก์ชัน (msg) {
console.log (ผงชูรส);
-
-
แม้ว่าวัตถุเหตุการณ์ใน JS และ JQ จะคล้ายกัน แต่ก็ยังมีความแตกต่างอยู่บ้าง คุณเข้าใจไหม