1. 程式人生 > 其它 >javascript 事件委託

javascript 事件委託

僅作為個人筆記使用,不進行詳細說明

參考:https://blog.csdn.net/lszyzs/article/details/106876057

https://zhidao.baidu.com/question/497365658094414364.html

刪除

<ul>
</ul>
<script>
// 由於是自動在ul標籤中生成li標籤的
let ul = document.querySelector("ul")
ul.onclick = (event) => {
    if(event.target.nodeName == "LI") {
      ul.removeChild(event.target)
    }
}
</script>

  

獲取自動生成標籤的下標

    <ul>
    </ul>
    <button>button</button>
    <script>
        let ul = document.querySelector("ul")
        let button = document.querySelector("button")
        button.onclick = function(event) {
            let li = document.createElement("li")
            li.innerHTML = "10"
            ul.appendChild(li)
        }
        ul.onclick = (event) => {
            let lis = document.querySelectorAll("li")
            if (event.target.nodeName == "LI") {
                lis.forEach((item, index) => {
                    if(event.target == item) {
                        console.log(index)
                    }
                })
                // ul.removeChild(event.target)
            }
        }
    </script>