Analisis masalah atribut khusus HTML5

Saat mentransfer nilai antara halaman dan js, kita sering menggunakan data-id=1, lalu mendapatkan nilai id melalui e.target.dataset.id

Hari ini saya tidak bisa mendapatkan nilainya ketika saya mendapatkannya

Belakangan saya menemukan bahwa objek e memiliki atribut currentTarget dan target, dan datasetnya ada di currentTarget, sehingga nilai yang benar diperoleh melalui e.currentTarget.dataset.id .

Selain itu, data-id=1 sebaiknya tidak menggunakan penamaan camel case seperti: data-Id=1 , sehingga terkadang nilainya tidak dapat diperoleh.

Definisi atribut yang dimulai dengan data- di situs web adalah hal yang umum. Meskipun W3C tidak mengenalinya, HTML5 terbaru menetapkan bahwa data- adalah wajar Beberapa elemen yang tidak didefinisikan dengan jelas dalam HTML menerapkan atribut yang ditentukan pengguna pada kodenya.

Peristiwa adalah metode komunikasi dari lapisan tampilan ke lapisan logika.

Peristiwa dapat memberikan umpan balik perilaku pengguna ke lapisan logika untuk diproses.

Peristiwa dapat diikat ke komponen. Ketika peristiwa pemicu tercapai, fungsi pemrosesan peristiwa yang sesuai di lapisan logika akan dijalankan.

Objek acara dapat membawa informasi tambahan, seperti id, dataset, sentuhan.

Ikat event handler ke komponen.

Misalnya, bindtap, ketika pengguna mengklik komponen, fungsi pemrosesan peristiwa yang sesuai akan ditemukan di Halaman yang sesuai pada halaman tersebut.

 <view id=tapTest data-hi=WeChat bindtap=tapName> Klik saya </view>

Tulis fungsi pemrosesan peristiwa yang sesuai dalam definisi Halaman yang sesuai, dan parameternya adalah peristiwa.

 Halaman({ nama tap: fungsi(acara) { console.log(acara) }})

Anda dapat melihat bahwa informasi logout kira-kira sebagai berikut:

 { type:tap, timeStamp:895, target: { id: tapTest, kumpulan data: { hi:WeChat } }, Target saat ini: { id: tapTest, kumpulan data: { hi:WeChat } }, detail: { x:53, y: 14 }, sentuh:[{ pengenal:0, halamanX:53, halamanY:14, klienX:53, klienY:14 }], berubahSentuhan:[{ pengenal:0, halamanX:53, halamanY:14, klienX:53, klienY:14 }]}

Tanggapi acara menggunakan fungsi WXS

Di atas adalah analisis masalah atribut khusus HTML5 yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!

Jika menurut Anda artikel ini bermanfaat, silakan cetak ulang, harap sebutkan sumbernya, terima kasih!