การวิเคราะห์ปัญหาของแอตทริบิวต์ที่กำหนดเองของ HTML5

เมื่อถ่ายโอนค่าระหว่างเพจและ js เรามักจะใช้ data-id=1 แล้วรับค่าของ id ผ่าน e.target.dataset.id

วันนี้ฉันรับคุณค่าไม่ได้เมื่อได้รับมัน

ต่อมา ฉันพบว่าออบเจ็กต์ e มีแอ็ตทริบิวต์ currentTarget และ target และชุดข้อมูลอยู่ใน currentTarget ดังนั้นจึงได้รับค่าที่ถูกต้องผ่าน e.currentTarget.dataset.id

นอกจากนี้ เป็นการดีที่สุดที่จะไม่ใช้ตัวพิมพ์อูฐในการตั้งชื่อ data-id=1 เช่น: data-Id=1 ไม่เช่นนั้นอาจไม่ได้รับค่าในบางครั้ง

เป็นเรื่องปกติที่จะเห็นคำจำกัดความของแอตทริบิวต์ที่ขึ้นต้นด้วยข้อมูลบนเว็บไซต์ แม้ว่า W3C จะไม่รู้จัก แต่ HTML5 ล่าสุดระบุว่าข้อมูลนั้นสมเหตุสมผล ใน HTML5 สิ่งใดก็ตามที่ขึ้นต้นด้วยข้อมูลจะเป็นแอตทริบิวต์ที่กำหนดเองซึ่งมักจะใช้ในการนำไปใช้ องค์ประกอบบางอย่างที่ไม่ได้กำหนดไว้อย่างชัดเจนใน HTML จะใช้แอตทริบิวต์ที่ผู้ใช้กำหนดกับโค้ด

เหตุการณ์เป็นวิธีการสื่อสารจากเลเยอร์มุมมองไปยังเลเยอร์ลอจิก

เหตุการณ์สามารถป้อนกลับพฤติกรรมของผู้ใช้ไปยังเลเยอร์ลอจิกเพื่อการประมวลผล

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

ออบเจ็กต์เหตุการณ์สามารถนำข้อมูลเพิ่มเติม เช่น id ชุดข้อมูล การสัมผัส

ผูกตัวจัดการเหตุการณ์กับส่วนประกอบ

ตัวอย่างเช่น Bintap เมื่อผู้ใช้คลิกที่ส่วนประกอบ ฟังก์ชันการประมวลผลเหตุการณ์ที่เกี่ยวข้องจะพบได้ในเพจที่เกี่ยวข้องของเพจ

 <view id=tapTest data-hi=WeChat bindtap=tapName> คลิกฉัน! </view>

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

 หน้า ({ tapName: function(event) { console.log(event) }})

คุณจะเห็นว่าข้อมูลที่ออกจากระบบมีดังนี้:

 { type:tap, timeStamp:895, target: { id: tapTest, ชุดข้อมูล: { hi:WeChat } }, currentTarget: { id: tapTest, ชุดข้อมูล: { hi:WeChat } }, รายละเอียด: { x:53, y: 14 } สัมผัส:[{ identifier:0, pageX:53, pageY:14, clientX:53, clientY:14 }], เปลี่ยนการสัมผัส:[{ ตัวระบุ:0, pageX:53, pageY:14, clientX:53, clientY:14 }]}

ตอบสนองต่อเหตุการณ์โดยใช้ฟังก์ชัน WXS

ข้างต้นคือการวิเคราะห์ปัญหาของแอตทริบิวต์ที่กำหนดเองของ HTML5 ที่บรรณาธิการแนะนำ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วบรรณาธิการจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!

หากคุณคิดว่าบทความนี้มีประโยชน์สำหรับคุณ คุณสามารถพิมพ์ซ้ำได้ โปรดระบุแหล่งที่มา ขอขอบคุณ!