data- & closest()

<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)
            }
        })
相關文章
相關標籤/搜索