十六、事件下（事件委托，案例）

知识点回顾（事件相关）：

事件绑定/注册/监听

DOM0
标签对象.事件类型 = 处理函数
标签对象.事件类型 = null
在标签上写 事件类型=“函数名()” setTimeout/setInterval(“函数名()”, 毫秒)
DOM1：没有
DOM2：
ie
标签对象.attachEvent（事件，处理函数）
标签对象.detachEvent（事件，处理函数）
主流
标签对象.addEventListener(事件类型，处理函数，事件流false冒泡)
标签对象.removeEventListener(事件类型，处理函数)
留心1：事件类型不加on
留心2：取消处理函数必须写 变量
留心3：同标签、同事件 想要累计 处理函数多个盒子
DOM3：新增事件类型

事件流

概念：
1. 同时触发多个事件
2. 多个标签嵌套，都绑定了事件
特性：操作一个 都触发
种类：冒泡型、捕获型
优先级：既设置冒泡又设置捕获 你说先触发谁
先捕获 再目标/自己 最终冒泡

事件对象

概念：存放事件相关信息 对象
数据：鼠标位置、键盘信息、事件target！！！
作用
1 回车表单提交 onsubmit submit onfocus focus document.onkeydown
2 阻止浏览器默认动作 return false e.preventDefault()
3 鼠标位置
offsetWidth = 宽度 + padding + border
offsetLeft = 相对于body位置 如果父定位符 同absolute
offsetX = 自己左上角
clientX 网页左上角
pageX 网页左上角 + 滚动条
screenX 屏幕左上角
4 阻止事件流
window.event.cancelBubble = true
e.stopPropagation()

■ 其他：冒泡捕获优先级

优先级：既设置冒泡又设置捕获 你说先触发谁
先捕获 再目标/自己 最终冒泡

事件委托!!!

概念：

事件委托就是利用事件流特性，将事件委托给父元素注册

代码演示：
需求1：
每点击一次“追加”按钮，ul中新增一个li标签
当点击ul中li标签时，删除该li标签

<style>
    ul {background: red;}
    li {background: green;}
    </style>
    
    <ul>
        <li>0001</li>
        <li>0002</li>
        <li>0003</li>
        <li>0004</li>
    </ul>
    
    <button>追加li</button>
    
    <script>
        var btn = document.querySelector('button')   // 1. 获取按钮
        btn.addEventListener('click', function() {   //给按钮绑定点击事件
            // 2. 事件处理函数中 
            var li = document.createElement('li')   //2.1 创建标签
            var text = document.createTextNode("神龙教  缺教徒 全网收")   //创建文档内容
            li.appendChild(text)                //创建的文档内容追加到li标签中
            
            //    2.2 追加到ul里面
            var ul = document.querySelector('ul')  //获取ul标签
            ul.appendChild(li)             //li标签追加到ul标签中（完成点击追加按钮添加一个li功能）
        })
            //3、利用事件委托，将点击事件绑定到父元素上，使点击li标签就能删除该标签
    var ul = document.querySelector('ul')      //获取父元素Ul
    ul.addEventListener('click', function(e) {    //点击事件绑定给父元素ul
    
        var e = e || window.event       //获取事件对象
        if (e.target.nodeName === "LI") {    //调用事件对象中target方法，并判断操作的是否是对应点击的li，是就移除
            this.removeChild(e.target)    //移除点击的li标签
        }
    })
    </script>

需求2：
要求下方表格点击“添加”按钮时，表格新增一行内容；
点击“删除”时，一整行都被删除掉

<button>添加</button>
<table border="1" cellspacing="0" cellpadding="10">
<tbody>
    <tr>
        <td>001</td>
        <td>删除</td>
    </tr>
    <tr>
        <td>001</td>
        <td>删除</td>
    </tr>
</tbody>
</table>
<script>
// -----------------------------------------------------------------------点击添加
var btnObj = document.querySelector('button')  // 1. 获取button
btnObj.addEventListener('click', function() {   // 2. 给button设置点击事件
    var trObj = document.createElement('tr')    // 2.1 创建行标签tr标签
    // 2.2创建2个td  含文本
    var tdObj1 = document.createElement('td')    //创建td1标签
    var tdObj2 = document.createElement('td')    //创建td2标签
    var textObj1 = document.createTextNode('内容')  //创建td1中的内容
    var textObj2 = document.createTextNode('删除')  //创建td2中的内容
    tdObj1.appendChild(textObj1)                   //将td1中的内容加到td1中
    tdObj2.appendChild(textObj2)                  //将td2中的内容加到td2中
    // 2.3 将2.2放到2.1中
    trObj.appendChild(tdObj1)                     //将td1加到tr中
    trObj.appendChild(tdObj2)                     //将td2加到tr中
    // 2.4 将2.1放到tbody中
    var tbodyObj = document.querySelector('tbody')     //获取tbody标签
    tbodyObj.appendChild(trObj)                        //将tr加到tbody中
})
      // ------------------------------------------------------------------删除功能
// 事件委托给父设置点击事件 tbody
var tbodyObj = document.querySelector('tbody')      //获取父标签tbody
tbodyObj.addEventListener('click', function(evt) {   //利用事件委托将点击事件加给父标签
    var e = evt ||window.event                       //获取事件对象
    if (e.target.innerHTML == '删除')                //利用事件对象中的target方法获取点击的元素，并判断是否点击的是否是对应的元素
    {
        this.removeChild(e.target.parentNode)    //删除点击的元素
    }
})
</script>

小总结

什么是事件委托：就是将子的事件 给父设置绑定

事件委托应用场景：通过js动态在页面增加标签后，这个标签还需要绑定事件

​ 发微博、点击删除星星小游戏、购物车递增递减数量等

事件委托相关关键词

1 给父设置绑定事件
2 判断是不是子 e.target.nodeName 获取点击的标签名