探索在原生网页中使用自定义数据属性

先说说我为什么有这种“奇怪”的想法。
它基于这样一个场景:我最近闲来无事完善了一个小demo:音乐播放器。在里面有一个功能 —— 点击列表某一项弹出音乐播放弹框。我原先一直是“为每一项单独加一个click事件监听”。这很糟糕!

<div id="videob"></div>

//js代码
videob.onclick=function(){
	let video=document.createElement('video')
	video.setAttribute('src','xxx')
	video.setAttribute('controls','controls')
	video.style.cssText="width:90%;height:300px"
	document.querySelector('body').appendChild(video)
}

后来我优化时改用了 事件代理 ,不得不承认它非常优秀,但是我不得不改变结构,使得js中出现了一堆“MP4数据”(一个数组),在触发事件时判断当前是哪一个,然后从数组中拿到赋值给 audiosrc


事实上,在开发 Web 应用时,经常会用 JavaScript 获取文档之外的信息 ,某些情况下,我们需要用一些技巧来处理这些额外信息以保证 Web 应用能够正常运行。一般而言,技巧无外乎是将额外的信息塞入事件处理程序或滥用 rel 属性或 class 属性以方便注入行为。

幸运的是,HTML5引入了自定义数据属性:所有的自定义数据属性都以 data-前缀开头,HTML5 文档的验证器会在验证时忽略它。开发人员可以在任意元素中加入自定义数据属性,属性值可以是照片的元数据、经纬度坐标或者弹出窗口的尺寸。
最棒的是,几乎在所有浏览器中,你都能够使用自定义数据属性,因为我们可以轻易地使用 JavaScript 来获取它们。


在开始操作之前,我们必须先“重复”一个概念:0级DOM事件 。通俗来说就是各种on前缀的事件名称(比如:onclick、onmouseon、onkeydown),他们可以存在于

你可能感兴趣的:(高效前端:前端性能优化实践,html5,javascript,事件代理,dom,css3)