你知道为什么小程序传值要data-* 这种写法 为什么绑定事件获取data-的值的时候要去currentTarget上取值吗

1,069 阅读1分钟

我们经常写小程序时会碰到这样的写法,为的是在点击事件的时候去传值,可你真的知道为什么要用这种形式传值吗?

小程序本质也是个webview 所以在我们眼里展示的也是dom节点跟传统网页没什么不同虽然标签用的view来写可它不就是div的封装嘛

HTML5规定可以为元素添加非标准型的属性,只需添加前缀data-,这些属性可以随意添加,随意命名,目的是为元素提供与渲染无关的信息,或提供语义信息。

<div id="app" data-id="123"></div>

//js代码
var div = document.getElementById("app");
var appId = div.dataset.id;//获取data-id的值

这样我们就能取到我们给的值了为了解决一些业务场景,为什么要写e.currentTarget.dataset.id取值dataset部分我们已经清楚了,那currentTarget又是哪里来的呢?

同样的Event 接口表示在 DOM 中发生的任何事件; 一些是用户生成的(例如鼠标或键盘事件),而其他由 API 生成(例如指示动画已经完成运行的事件,视频已被暂停等等)。详情见MDN

Event 接口的只读属性 currentTarget 表示的,标识是当事件沿着 DOM 触发时事件的当前目标。它总是指向事件绑定的元素,而 Event.target 则是事件触发的元素。

这时为什么日常无脑写的e.currentTarget.dataset.id这种写法的原因就知道了吧其实就是传统web上的知识点