12. 事件

一个事件的组成

触发谁的事件：事件源
触发什么事件：事件类型
触发以后做什么：事件处理函数

  var oDiv = document.querySelector('div')

  oDiv.onclick = function () {}
  // 谁来触发事件 => oDiv => 这个事件的事件源就是 oDiv
  // 触发什么事件 => onclick => 这个事件类型就是 click
  // 触发之后做什么 => function () {} => 这个事件的处理函数

我们想要在点击 div 以后做什么事情，就把我们要做的事情写在事件处理函数里面

   var oDiv = document.querySelector('div')

   oDiv.onclick = function () {
     console.log('你点击了 div')
   }

当我们点击 div 的时候，就会执行事件处理函数内部的代码
每点击一次，就会执行一次事件处理函数

onclick中on是固定的关键字，事件类型是click事件，给box这个事件源绑定了一个click事件，（只要点击了box这个盒子，后面的事件处理函数就会执行）

13 事件的绑定方式

13-1 事件的绑定

我们现在给一个注册事件都是使用 onxxx 的方式，
但是这个方式不是很好，只能给一个元素注册一个事件，
一旦写了第二个事件，那么第一个就被覆盖了

  oDiv.onclick = function () {
    console.log('我是第一个事件')
  }

  oDiv.onclick = function () {
    console.log('我是第二个事件')
  }

当你点击的时候，只会执行第二个，第一个就没有了
我们还有一种事件监听的方式去给元素绑定事件
使用 addEventListener 的方式添加
- 这个方法不兼容，在 IE 里面要使用 attachEvent
addEventListener : 非 IE 7 8 下使用
- 语法： 元素.addEventListener('事件类型'，事件处理函数，冒泡还是捕获)

  oDiv.addEventListener('click', function () {
    console.log('我是第一个事件')
  }, false)

  oDiv.addEventListener('click', function () {
    console.log('我是第二个事件')
  }, false)

当你点击 div 的时候，两个函数都会执行，并且会按照你注册的顺序执行
先打印 我是第一个事件 再打印 我是第二个事件
注意： 事件类型的时候不要写 on，点击事件就是 click，不是 onclick
attachEvent ：IE 7 8 下使用
- 语法： 元素.attachEvent('事件类型'，事件处理函数)
```
 oDiv.attachEvent('onclick', function () {
   console.log('我是第一个事件')
 })

 oDiv.attachEvent('onclick', function () {
   console.log('我是第二个事件')
 })
```
- 当你点击 div 的时候，两个函数都会执行，并且会按照你注册的顺序倒叙执行
- 先打印 我是第二个事件 再打印 我是第一个事件
- 注意： 事件类型的时候要写 on，点击事件就行 onclick

两个方式的区别

注册事件的时候事件类型参数的书写
- addEventListener ：不用写 on
- attachEvent ：要写 on
参数个数
- addEventListener ：一般是三个常用参数
- attachEvent ：两个参数
执行顺序
- addEventListener ：顺序注册，顺序执行
- attachEvent ：顺序注册，倒叙执行
适用浏览器
- addEventListener ：非 IE 7 8 的浏览器
- attachEvent ： IE 7 8 浏览器

13-2 事件的解绑

disabled属性

 <button id="btn" >抽奖</button>
   <script>
       // btn.onclick = function(){
       //     console.log("谢谢惠顾")

       //     // console.log(this)
       //     this.disabled = "disabled"  //（禁用）
       // }


       //事件解绑-dom0  dom节点.onclick = null

       // btn.onclick = function(){
       //     console.log("谢谢惠顾")

       //     this.onclick = null   //(赋成空的，点一次出来，再点为空)
       // }


       //事件解绑dom2
       
       //方案一
       // function handler(){
       //     console.log("谢谢惠顾")

       //     this.removeEventListener("click",handler)
       // }
       // btn.addEventListener("click",handler)

       //btn.removeEventListener("click",handler)

       //方案二 IE有兼容性问题
       function handler(){
           console.log("谢谢惠顾")

           btn.detachEvent("onclick",handler) //解绑
       }
       btn.attachEvent("onclick",handler)
   </script>

14. 常见的事件

我们在写页面的时候经常用到的一些事件
大致分为几类，浏览器事件 / 鼠标事件 / 键盘事件 / 表单事件 / 触摸事件
不需要都记住，但是大概要知道

1.浏览器事件

load ：页面全部资源加载完毕
scroll ：浏览器滚动的时候触发
...

2.鼠标事件

click ：点击事件
dblclick ：双击事件
contextmenu ：右键单击事件
mousedown ：鼠标左键按下事件
mouseup ：鼠标左键抬起事件
mousemove ：鼠标移动
mouseover ：鼠标移入事件（移入移出放大镜）
mouseout ：鼠标移出事件
mouseenter ：鼠标移入事件
mouseleave ：鼠标移出事件
...

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       #box{
           width: 200px;
           height: 200px;
           background:yellow;
       }

       #child{
           width: 100px;
           height: 100px;
           background-color: red;
       }
   </style>
</head>
<body>
   <button id="btn">click</button>
   <div id="box">

       <div id="child"></div>
   </div>
   <script>
       //鼠标事件
       // click 
       // dblclick
       btn.onclick = function(){
           console.log("单击执行")
       }
       btn.ondblclick = function(){
           console.log("双击执行")
       }

       //contextmenu 右键单击
       document.oncontextmenu = function(){
           console.log("右键单击.自定义右键菜单")
       }

       // mousedown鼠标左键按下事件 mousemove鼠标移动 mouseup鼠标左键抬起事件 
       //鼠标按下，移动，抬起

       // box.onmousedown = function(){
       //     console.log("鼠标按下") //鼠标按下那一刻就会触发，没有反悔余地，click可以按住，不松手就不会触发，可以在外面松手取消。
       // }
       
       // box.onmousemove = function(){
       //     console.log("鼠标移动") //鼠标在它身上移动触发
       // }
       
       // box.onmouseup = function(){
       //     console.log("鼠标抬起") //鼠标
       // }


       //移入移出 mouseover mouseout
       //在孩子身上移入移出也会触发 移入孩子和移出孩子效果

       box.onmouseover = function(){
           console.log("移入")
       }
       box.onmouseout = function(){
           console.log("移出")
       }
       
       
       //移入移除 mouseenter mouseleave
       //在孩子身上不会执行

       // box.onmouseenter = function(){
       //     console.log("移入")
       // }
       // box.onmouseleave = function(){
       //     console.log("移出")
       // }
   </script>
</body>
</html>

3.键盘事件

keyup ：键盘抬起事件
keydown ：键盘按下事件
keypress ：键盘按下再抬起事件
...

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <input type="text" id="username">
   <script>
       // 场景：window,document, 输入框 input

       username.onkeydown = function(){
           console.log("按下键盘","判读是不是回车键")
       }

       username.onkeyup = function(){
           console.log("抬起键盘","判读是不是回车键")
       }
   </script>
</body>
</html>

4.表单事件

change : 表单内容改变事件
input : 表单内容输入事件
submit : 表单提交事件
...

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <form action="" id="myform">
       <input type="text" id="username">

       <input type="reset"/>
       <input type="submit" value="提交"/>
   </form>
   <script>
       // focus blur

       username.onfocus = function(){
           console.log("获取焦点")
       }

       username.onblur = function(){
           console.log("失去焦点")
       }

       // change 获取焦点， 失去焦点的对比里面内容不一样才会触发
       // username.onchange = function(){
       //     console.log("change")
       // }

       //input 内容不一样
       username.oninput= function(){
           console.log("input")
       }


       // submit提交 ,reset重置

       myform.onsubmit = function(){
           console.log("submit","校验表单内容")
           return false //阻止默认行为
       }

       myform.onreset = function(){
           console.log("reset")
       }
   </script>
</body>
</html>

5.触摸事件（只针对移动端）

touchstart ：触摸开始事件
touchend ：触摸结束事件
touchmove ：触摸移动事件
ontouchcancel
...

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>

   <style>
       div{
           width: 100px;
           height: 100px;
           background-color: blue;
       }
   </style>
</head>
<body>
   <div id="box"></div>

   <script>

       box.ontouchstart = function(){
           console.log("touchstart")
       }

       box.ontouchmove = function(){
           console.log("touchmove")
       }

       box.ontouchend = function(){
           console.log("touchend")
       }

       box.ontouchcancel = function(){
           console.log("touchcancel")
       }
   </script>
</body>
</html>

15. 事件对象

什么是事件对象？就是当你触发了一个事件以后，对该事件的一些描述信息
例如
- 你触发一个点击事件的时候，你点在哪个位置了，坐标是多少
- 你触发一个键盘事件的时候，你按的是哪个按钮
- ...
每一个事件都会有一个对应的对象来描述这些信息，我们就把这个对象叫做 事件对象
浏览器给了我们一个 黑盒子，叫做 window.event，就是对事件信息的所有描述
- 比如点击事件
- 你点在了 0，0 位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
- 你点在了 10, 10 位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
- ...
```
oDiv.onclick = function () {
  console.log(window.event.X轴坐标点信息)
  console.log(window.event.Y轴坐标点信息)
}
```
这个玩意很好用，但是一般来说，好用的东西就会有 兼容性问题
在 IE低版本 里面这个东西好用，但是在 高版本IE 和 Chrome 里面不好使了
我们就得用另一种方式来获取 事件对象

在每一个事件处理函数的行参位置，默认第一个就是 事件对象

oDiv.onclick = function (e) {
  // e 就是和 IE 的 window.event 一样的东西
  console.log(e.X轴坐标点信息)
  console.log(e.Y轴坐标点信息)
}

综上所述，我们以后在每一个事件里面，想获取事件对象的时候，都用兼容写法

oDiv.onclick = function (e) {
  e = e || window.event
  console.log(e.X轴坐标点信息)
  console.log(e.Y轴坐标点信息)
}

15-1 事件对象————鼠标事件

点击事件的光标坐标点获取

1. clientX和clientY 距离窗口

2. pageX和pageY 距离文档流

3. offsetX和offsetY 距离盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            width: 2000px;
            height: 2000px;
        }
        div{
            width: 200px;
            height: 200px;
            background:skyblue;
            margin:100px;
        }
        p{
            width: 100px;
            height: 100px;
            margin:30px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="box">
        <p></p>
    </div>
    <script>
        box.onclick = function(evt){
            console.log(evt.clientX,evt.clientY)
            console.log(evt.pageX,evt.pageY)

            console.log(evt.offsetX,evt.offsetY)
        }
        //clientX clientY 距离浏览器可视窗口的左上角的坐标值

        //pageX pageY 距离页面文档流的左上角的坐标值


        //offsetX offsetY 距离触发元素的左上角的坐标值
    </script>
</body>
</html>

16. 案例

16-1鼠标跟随

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            width: 200px;
            height: 50px;
            background:yellow;
            position: relative;

            margin:100px;
        }

        #box p {
            width: 300px;
            height: 200px;
            background-color:red;
            position: absolute;
            left:100px;
            top:100px;
            display: none;

            //方案二
            pointer-events: none;
            /* 穿透 */

            z-index:100; //优先级
        }
    </style>
</head>
<body>
    <div id="box">
        kerwin的头像
        <p>
            kerwin的介绍
        </p>
    </div>

    <div>111111</div>
    <script>

        box.onmouseover = function(){
            this.firstElementChild.style.display="block"
        }
        box.onmouseout = function(){
            this.firstElementChild.style.display="none"
        }

        box.onmousemove = function(evt){
            // console.log(evt.offsetX,evt.offsetY)

            
        this.firstElementChild.style.left = evt.offsetX  + "px"  //evt.offsetX这是number类型的值，要想控制上去需要加单位px
        this.firstElementChild.style.top = evt.offsetY + "px"   }
        //会出现“闪现问题”
            
            
         //解决方案一，偏移————鼠标无法在子盒子<p>标签身上
         this.firstElementChild.style.left = evt.offsetX +50  + "px" 
         this.firstElementChild.style.top = evt.offsetY +50 + "px"   
            
    </script>
</body>
</html>

16-2鼠标拖拽

方案一

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background: skyblue;
            position: absolute;
        }
    </style>
</head>

<body>

    <div id="box">

    </div>
    <script>
        box.onmousedown = function () {
            console.log("down")

            document.onmousemove = function (evt) {
                // console.log("move")
                var x = evt.clientX - box.offsetWidth/2
                var y = evt.clientY - box.offsetHeight/2

                if(y<=0) y=0
                if(x<=0) x=0

                if(x>= document.documentElement.clientWidth-box.offsetWidth)
                x = document.documentElement.clientWidth-box.offsetWidth

                if(y>= document.documentElement.clientHeight-box.offsetHeight)
                y = document.documentElement.clientHeight-box.offsetHeight

                box.style.left = x + "px"
                box.style.top = y + "px"
            }
        }
        box.onmouseup = function () {
            console.log("up")

            document.onmousemove = null
        }
    </script>
</body>
</html>

方案二

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background: skyblue;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="box">

    </div>
    <script>
        isDown = false
        box.onmousedown = function () {
            console.log("down")
            isDown = true
        }
        box.onmouseup = function () {
            console.log("up")
            isDown = false
            // document.onmousemove = null
        }


        document.onmousemove = function (evt) {
            if (!isDown) return //return不走下面代码
            console.log("move")
            var x = evt.clientX - box.offsetWidth / 2
            var y = evt.clientY - box.offsetHeight / 2

            if (y <= 0) y = 0
            if (x <= 0) x = 0

            if (x >= document.documentElement.clientWidth - box.offsetWidth)
                x = document.documentElement.clientWidth - box.offsetWidth

            if (y >= document.documentElement.clientHeight - box.offsetHeight)
                y = document.documentElement.clientHeight - box.offsetHeight

            box.style.left = x + "px"
            box.style.top = y + "px"
        }
    </script>
</body>
</html>

17. 事件的传播

当元素触发一个事件的时候，其父元素也会触发相同的事件，父元素的父元素也会触发相同的事件
就像上面的图片一样
点击在红色盒子上的时候，会触发红色盒子的点击事件
也是点击在了粉色的盒子上，也会触发粉色盒子的点击事件
也是点击在了 body 上，也会触发 body 的点击事件
也是点击在了 html 上，也会触发 html 的点击事件
也是点击在了 document 上，也会触发 document 的点击事件
也是点击在了 window 上，也会触发 window 的点击事件
也就是说，页面上任何一个元素触发事件，都会一层一层最终导致 window 的相同事件触发，前提是各层级元素得有注册相同的事件，不然不会触发
在事件传播的过程中，有一些注意的点：
1. 只会传播同类事件
2. 只会从点击元素开始按照 html 的结构逐层向上元素的事件会被触发
3. 内部元素不管有没有该事件，只要上层元素有该事件，那么上层元素的事件就会被触发
到现在，我们已经了解了事件的传播，我们再来思考一个问题
- 事件确实会从自己开始，到 window 的所有相同事件都会触发
- 是因为我们点在自己身上，也确实逐层的点在了直至 window 的每一个元素身上
- 但是到底是先点在自己身上，还是先点在了 window 身上呢
- 先点在自己身上，就是先执行自己的事件处理函数，逐层向上最后执行 window 的事件处理函数
- 反之，则是先执行 window 的事件处理函数，逐层向下最后执行自己身上的事件处理函数

冒泡、捕获、目标

我们刚才聊过了，每一个事件，都是有可能从自己到 window ，有可能要执行多个同类型事件
那么这个执行的顺序就有一些说法了

目标

你是点击在哪个元素身上了，那么这个事件的目标就是什么

冒泡

就是从事件目标的事件处理函数开始，依次向外，直到 window 的事件处理函数触发
也就是 从下向上 的执行事件处理函数

捕获

就是从 window 的事件处理函数开始，依次向内，只要事件目标的事件处理函数执行
也就是 从上向下 的执行事件处理函数

冒泡和捕获的区别

就是在事件的传播中，多个同类型事件处理函数的执行顺序不同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #outer{
            width: 300px;
            height: 300px;
            background:yellow;
            overflow: hidden;
        }

        #center{
            width: 200px;
            height: 200px;
            background:blue;
            margin:20px;
            overflow: hidden;
        }

        #inner{
            width: 100px;
            height: 100px;
            background:red;
            margin:20px;
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="center">
            <div id="inner"></div>
        </div>
    </div>
    <script>
        // inner.onclick = function(){
        //     console.log("inner")
        // }
        // center.onclick = function(){
        //     console.log("center")
        // }
        // outer.onclick = function(){
        //     console.log("outer")
        // }

        // document.body.onclick = function(){
        //     console.log("document.body")
        // }
        // document.documentElement.onclick = function(){
        //     console.log("document.documentElement")
        // }

        // document.onclick = function(){
        //     console.log("document")
        // }

        // window.onclick = function(){
        //     console.log("window")
        // }


        /*
           标准的dom事件流：
           捕获：window=>docuemtn=>body=>outer
           目标： inner
           冒泡： outer=>body=>docuemnt=>window、

           ie 低版本
           只支持冒泡


           默认情况 只在冒泡触发
           按照dom2事件绑定，并进行配置 才能看到捕获的回调函数被触发。
        */


            inner.addEventListener("click",function(){
                console.log("inner")
            })
            center.addEventListener("click",function(){
                console.log("center")
            })
            outer.addEventListener("click",function(){
                console.log("outer")
            })
            document.body.addEventListener("click",function(){
                console.log("document.body")
            })
            document.documentElement.addEventListener("click",function(){
                console.log("document.docuementElement")
            })
            window.addEventListener("click",function(){
                console.log("window")
            })


            // inner.addEventListener("click",function(){
            //     console.log("inner-捕获")
            // },true)
            // center.addEventListener("click",function(){
            //     console.log("center-捕获")
            // },true)
            // outer.addEventListener("click",function(){
            //     console.log("outer-捕获")
            // },true)
            // document.body.addEventListener("click",function(){
            //     console.log("document.body-捕获")
            // },true)
            // document.documentElement.addEventListener("click",function(){
            //     console.log("document.docuementElement-捕获")
            // },true)
            // window.addEventListener("click",function(){
            //     console.log("window-捕获")
            // },true)
    </script>
</body>
</html>

17-1. 阻止事件的传播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <button>aaa</button> -->
    <ul id="list">

    </ul>
    <script>
        var arr = ["111","2222","333"]

        for(var i=0;i<arr.length;i++){
            var oli = document.createElement("li")
            oli.innerHTML = arr[i]

            var obutton = document.createElement("button")
            obutton.innerHTML = "delete"
            obutton.onclick = handler
            oli.appendChild(obutton)
            
            oli.onclick = function(){
                location.href = "http://www.baidu.com"
            }
            list.appendChild(oli)
        }

        function handler(evt){
             //阻止事件传播
            evt.stopPropagation()

            //ie
            // evt.cancelBubble = true
            // console.log(this.parentNode)
            this.parentNode.parentNode.removeChild(this.parentNode)
        }
    </script>
</body>
</html>

18. 默认行为

默认行为，就是不用我们注册，它自己就存在的事情
- 比如我们点击鼠标右键的时候，会自动弹出一个菜单
- 比如我们点击 a 标签的时候，我们不需要注册点击事件，他自己就会跳转页面
- ...
这些不需要我们注册就能实现的事情，我们叫做 默认事件

阻止默认行为

有的时候，我们不希望浏览器执行默认事件
- 比如我给 a 标签绑定了一个点击事件，我点击你的时候希望你能告诉我你的地址是什么
- 而不是直接跳转链接
- 那么我们就要把 a 标签原先的默认事件阻止，不让他执行默认事件
我们有两个方法来阻止默认事件
- e.preventDefault() : 非 IE 使用
- e.returnValue = false ：IE 使用

我们阻止默认事件的时候也要写一个兼容的写法

<a href="https://www.baidu.com">点击我试试</a>
<script>
	var oA = document.querySelector('a')
  
  a.addEventListener('click', function (e) {
    e = e || window.event
    
    console.log(this.href)
    
    e.preventDefault ? e.preventDefault() : e.returnValue = false
  })
</script>

这样写完以后，你点击 a 标签的时候，就不会跳转链接了
而是会在控制台打印出 a 标签的 href 属性的值

<script>
        // dom0 return false 阻止默认行为
        // document.oncontextmenu = function(){
        //     console.log("右键单击.自定义右键菜单")
        //     return false
        // }

        //dom2 evt.preventDefault()
        //dom2 ie evt.returnValue = false
        document.addEventListener("contextmenu",function(evt){
            console.log("右键单击.自定义右键菜单")
            // return false
            evt.preventDefault()
        })
    </script>

案例———自定义右键菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style: none;
            width: 200px;
            padding:10px;
            border:1px solid black;
            display: none;
            position: absolute;
        }

        ul li:hover{
            background:skyblue;
        }
    </style>
</head>
<body>
    <ul id="list">
        <li class="aaa">1111</li>
        <li class="bbb">2222</li>
        <li class="ccc">3333</li>
    </ul>
    <script>
        document.addEventListener("contextmenu",function(evt){
            evt.preventDefault()
            list.style.display = "block"
            //右键菜单位置
            var x = evt.clientX
            var y = evt.clientY
            if(x >= document.documentElement.clientWidth-list.offsetWidth)
            x = document.documentElement.clientWidth-list.offsetWidth

            if(y >= document.documentElement.clientHeight-list.offsetHeight)
            y = document.documentElement.clientHeight-list.offsetHeight
            list.style.left = x + "px"
            list.style.top = y + "px"
        })

        document.addEventListener("click",()=>{
            list.style.display = "none"
        }) //冒泡display = "none"

        list.onclick = function(){
            console.log("list")
        }
    </script>
</body>
</html>

19. 事件委托

就是把我要做的事情委托给别人来做
因为我们的冒泡机制，点击子元素的时候，也会同步触发父元素的相同事件
所以我们就可以把子元素的事件委托给父元素来做

19-1 事件触发

点击子元素的时候，不管子元素有没有点击事件，只要父元素有点击事件，那么就可以触发父元素的点击事件

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
  	var oUl = docuemnt.querySelector('ul')
    
    oUl.addEventListener('click', function (e) {
      console.log('我是 ul 的点击事件，我被触发了')
    })
  </script>
</body>

像上面一段代码，当你点击 ul 的时候肯定会触发
但是当你点击 li 的时候，其实也会触发

target

target 这个属性是事件对象里面的属性，表示你点击的目标
当你触发点击事件的时候，你点击在哪个元素上，target 就是哪个元素

这个 target 也不兼容，在 IE 下要使用 srcElement

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
  	var oUl = docuemnt.querySelector('ul')
    
    oUl.addEventListener('click', function (e) {
      e = e || window.event
      var target = e.target || e.srcElement
        // 低版本的IE浏览器 e.srcElement
      console.log(target)
    })
  </script>
</body>

上面的代码，当你点击 ul 的时候，target 就是 ul
当你点击在 li 上面的时候，target 就是 li

19-2 委托

这个时候，当我们点击 li 的时候，也可以触发 ul 的点事件
并且在事件内部，我们也可以拿到你点击的到底是 ul 还是 li

这个时候，我们就可以把 li 的事件委托给 ul 来做

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
  	var oUl = docuemnt.querySelector('ul')
    
    oUl.addEventListener('click', function (e) {
      e = e || window.event
      var target = e.target || e.srcElement
     
      // 判断你点击的是 li
      if (target.nodeName.toUpperCase === 'LI') {
      	// 确定点击的是 li
        // 因为当你点击在 ul 上面的时候，nodeName 应该是 'UL'
        // 去做点击 li 的时候该做的事情了
        console.log('我是 li，我被点击了')
      }
    })
  </script>
</body>

上面的代码，我们就可以把 li 要做的事情委托给 ul 来做

<body>
    <ul id="list">
        <li>
            111111
            <button>add</button>
        </li>
    </ul>
    <script>
        list.onclick = function(evt){
            console.log(evt.target || evt.srcElement)
        }

        //减少多个函数的绑定的性能损耗
        //动态添加li，也会有事件处理
    </script>
</body>

<body>
    <!-- <button>aaa</button> -->
    <ul id="list">

    </ul>
    <script>
        var arr = ["111","2222","333"]

        for(var i=0;i<arr.length;i++){
            var oli = document.createElement("li")
            oli.innerHTML = arr[i]

            var obutton = document.createElement("button")
            obutton.innerHTML = "delete"
            
            oli.appendChild(obutton)
            
            list.appendChild(oli)
        }

      //绑定
      list.onclick = function(evt){
          console.log(evt.target.nodeName)
          if(evt.target.nodeName==="BUTTON"){
            evt.target.parentNode.remove()
          }
          
      }
    </script>
</body>

三.事件12-19 （P97-P108）