<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) } })