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)
            }
        })
相关文章
相关标签/搜索