<h1>自定义属性</h1> <p> data-methodName 属性赋予咱们在全部 HTML 元素上嵌入自定义 data 属性的能力 调用该属性使用 dataset.methodName 进行调用 </p> <p> objectName.closest(Selctor) 方法找到该对象最近的含有 Selctor 匹配元素的选择器 </p> <div data-id='01' class="class-button"> <div> <button class="class-button-update">更新</button> <button class="class-button-delete">删除</button> </div> </div> <div data-id='02' class="class-button"> <div> <button class="class-button-update">更新</button> <button class="class-button-delete">删除</button> </div> </div>
// 给 body 绑一个事件 document.querySelector('body').addEventListener('click', function(event){ // 找到点击对象 var target = event.target; // 输出idValue if(target.classList.contains('class-button-update')) { var dom = target.closest('.class-button') var idValue = dom.dataset.id console.log('update', idValue) } if(target.classList.contains('class-button-delete')) { var dom = target.closest('.class-button') var idValue = dom.dataset.id console.log('delete', idValue) } })