js动态添加修改删除元素

事件委托：e.target

核心：1.通过事件冒泡给子元素添加事件，控制新生成的元素进行操作

2.减少DOM元素操作，只需要绑定一个父元素就可以，不用循环遍历每一个子元素进行绑定事件操作，提高程序性能

目的：给所有元素(包括新生成的)进行修改删除操作

事件监听：addEventListener  清除  removeListener(定义事件的变量名)

作用：给同一个对象绑定多个相同事件 （二级事件）

不使用事件监听后面绑定的相同事件会覆盖前面的事件(0级事件)

    最前插入新节点
    最后插入新节点
    

        
桃园豪杰三结义 替换 删除
        
孙坚跨江击刘表 替换 删除
        
吕奉先射戟辕门 替换 删除
        
关公赚城斩车胄 替换 删除
        
玄德荆州依刘表 替换 删除
        
赵子龙单骑救主 替换 删除
        
诸葛亮痛哭庞统 替换 删除
        
关云长败走麦城 替换 删除
        
武侯弹琴退仲达 替换 删除
        
魏主政归司马氏 替换 删除
    

注意：innerHTML和innerText是属性，不加小括号 console.log( target.innerText) 直接获取

bug心得：在实现修改和删除功能中，我是给ul分两次绑定点击事件，想分布实现修改和删除，然后发现不管是点击修改还是删除都只执行上面一种代码，然后经过指导做if判断点击的是那个按钮来分别实现不同的功能

动态修改：上面的是替换一个死的li标签，我们希望通过点击修改然后弹出输入框输入自定义的内容进行修改

重点：给父元素添加的事件委托里面所有的不同事件都可以通过冒泡事件呈现

注意：只有同类型的才可以

比如双击可以冒泡单击   单击可以冒泡失焦

单击不能冒泡双击,移入移出

 总结： 冒泡情况有很多种，具体的还需要实践 主要分享不是要一样的事件才可以冒泡

 // 事件委托进行修改和删除
        ul.addEventListener("click", function (e) {
            var target = e.target
            if (target.innerText == "替换") {
                var input = document.createElement("input")
                input.autofocus = true//添加自动聚焦提高用户体验
                ul.replaceChild(input, target.parentElement)
                   //失焦事件 鼠标移出触发
                input.onblur = function () {
                    if (confirm("你确认要修改这一条内容吗？")) {//判断是否确认修改/防止误触
                        if (input.value) {//判断内容是否有修改的内容
                            // 如果修改就把值给新的li
                            console.log(input.value);
                            var li = document.createElement("li")
                            li.innerHTML = `${input.value}替换 删除`
                            ul.replaceChild(li, input)
                        } else {
                            alert("修改内容不能为空！")
                            // // 如果没有修改就返回之前的li标签
                            ul.replaceChild(target.parentElement, input)
                        }
                    } else {
                        // 如果没有修改就返回之前的li标签
                        ul.replaceChild(target.parentElement, input)
                    }
                }
            } else if (target.innerText == "删除") {//判断是否确认删除/防止误触
                if (confirm("确认要删除这一条吗？")) {
                    ul.removeChild(target.parentElement)
                }
            }
        })

多次进行if判断的目的就是优化逻辑   防止用户多种操作出现bog

可以通过nodeName  className  innerText 来判断是不是删除按钮

最终版：解决了点击修改之后可以点击其他按钮的操作  添加了禁用其他按钮操作

    
    
    
    
    



    最后插入新节点
    

        
桃园豪杰三结义 替换 删除
        
孙坚跨江击刘表 替换 删除
        
吕奉先射戟辕门 替换 删除
        
关公赚城斩车胄 替换 删除
        
玄德荆州依刘表 替换 删除
        
赵子龙单骑救主 替换 删除
        
诸葛亮痛哭庞统 替换 删除
        
关云长败走麦城 替换 删除
        
武侯弹琴退仲达 替换 删除
        
魏主政归司马氏 替换 删除
    
    

下面不用看了^-^

以下是错误代码展示

 // 替换
        ul.addEventListener("click", function (event) {
            var target = event.target
                var li = document.createElement("li")
                li.innerHTML = `删减修改后版本 替换 删除`
                ul.replaceChild(li, target.parentElement)
        })
        //删除
        ul.addEventListener("click", function (event) {
            var target = event.target
            ul.removeChild(target.parentElement)
        })

这样无论点击修改还是删除都只执行修改程序

因为没有给点击做判断是修改还是删除就默认执行上面的程序