关键词：

注册事件（绑定）
删除事件（解绑）
DOM事件流
事件对象
阻止事件冒泡
事件委托（代理、委派）
常用的鼠标事件
常用的键盘事件

一、注册事件

两种方法：传统方法和方法监听注册方法

    1. 传统方式注册事件
    2. 事件侦听注册事件 节点对象.addEventListener(type,listener[,useCapture])
        (1) 里面的事件类型是字符串 必定加引号 而且不带on
        (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
    3. attachEvent IE9以前的版本支持

二、删除事件

代码方法：
    1. 传统方式删除事件
    2. removeEventListener 删除事件
    3. detachEvent

    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
                alert(11);
        // 1. 传统方式删除事件
            divs[0].onclick = null;
        }
        
        // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }

        // 3. detachEvent
        divs[2].attachEvent('onclick', fn1);
        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }

三、DOM事件流

DOM事件流的过程：

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

<script>
        // dom 事件流 三个阶段
        // 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。

        // 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。

        // 3. 捕获阶段如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son/

        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, true);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, true);

        // 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  /

        //son -> father ->body -> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
</script>

    注意：
        1. JS代码中只能执行捕获或者冒泡其中的一个阶段。
        2. onclick和attachEvent只能得到冒泡阶段。
        3. addEventListener (type, listener [, useCapture])第三 个参数如果是true ,表示在事件捕获阶段调用事件处理程序;
           如果是false (不写默认就是false) , 表示在事件冒泡阶段调用事件处理程序。
        4. 实际开发中我们很少使用事件捕获,我们更关注事件冒泡。
        5. 有些事件是没有冒泡的,比如onblur、onfocus、 onm ouseenter. onm ouse leave
        6. 事件冒泡有时候会带来麻烦,有时候又会帮助很巧妙的做某些事件,我们后面讲解。

四、事件对象

    (一)概念

1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法  e = e || window.event;

        var div = document.querySelector('div');
        方法1
        div.onclick = function(e) {
                    // console.log(e);
                    // console.log(window.event);
                    // e = e || window.event;
                    console.log(e);

                }
        方法2
        div.addEventListener('click', function(e) {
                console.log(e);
            })

    (二)常见事件对象的属性和方法

        (1)返回事件类型

            1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）
            /区别 ： e.target 点击了那个元素，就返回那个元素 ; this 那个元素绑定了这个点击事件，那么就返回谁/

                var div = document.querySelector('div');
                div.addEventListener('click', function(e) {
                    console.log(e.target);
                    console.log(this);

                })
                var ul = document.querySelector('ul');
                ul.addEventListener('click', function(e) {
                        // 我们给ul 绑定了事件  那么this 就指向ul  
                        console.log(this);
                        console.log(e.currentTarget);

                        // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
                        console.log(e.target);

                    })
                    // 了解兼容性
                    // div.onclick = function(e) {
                    //     e = e || window.event;
                    //     var target = e.target || e.srcElement;
                    //     console.log(target);

                // }

            2. 了解 跟 this 有个非常相似的属性 currentTarget  ie678不认识

        (2)阻止默认行为（事件） 

            /让链接不跳转 或者让提交按钮不提交/

            var a = document.querySelector('a');
            a.addEventListener('click', function(e) {
                    e.preventDefault(); //  dom 标准写法
                })

        (3)阻止冒泡  

            目的：
            /*dom 推荐的标准*/ stopPropagation() 

            var son = document.querySelector('.son');
            /-----------------------阻止冒泡---------------------------------/
            son.addEventListener('click', function(e) {
                alert('son');
                e.stopPropagation(); // stop 停止  Propagation 传播
                e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
            }, false);
            /---------------------------------------------------------------/
            var father = document.querySelector('.father');
            father.addEventListener('click', function() {
                alert('father');
            }, false);
            document.addEventListener('click', function() {
                alert('document');
            })

        (#)事件委托（代理、委派）

            /阻止事件冒泡的应用场景/

            <!>事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点 ; 根据树结构的思想，可灵活应用
                                 最主要的操作如下：为父节点添加侦听器（绑定事件），然后在执行代码块中获取事件对象event从而操作这个对象

            var ul = document.querySelector('ul');
            ul.addEventListener('click', function(e) {
                // alert('知否知否，点我应有弹框在手！');
                // e.target 这个可以得到我们点击的对象
                e.target.style.backgroundColor = 'pink';   // e.target 为点击的对象，在这里要么是li要么是ul（子、父对象）
            })

            <!>有个小问题：
            如果点的是ul，那么 e.target 就是 ul对象（元素节点），函数执行会把这个对象的背景色变为粉色。

五、常用事件
    
    (一)鼠标事件

        /*鼠标事件对象 MouseEvent*/

        (1) click

            document.addEventListener('click', function(e) {
                // 1. client 鼠标在可视区的x和y坐标
                console.log(e.clientX);
                console.log(e.clientY);
                console.log('---------------------');

                // 2. page 鼠标在页面文档的x和y坐标
                console.log(e.pageX);
                console.log(e.pageY);
                console.log('---------------------');

                // 3. screen 鼠标在电脑屏幕的x和y坐标
                console.log(e.screenX);
                console.log(e.screenY);

            })

        (2) mousemove

            var pic = document.querySelector('img');
            document.addEventListener('mousemove', function(e) {
            // 1. mousemove只要我们鼠标移动1px 就会触发这个事件
            // console.log(1);
            // 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片
            var x = e.pageX;
            var y = e.pageY;
            console.log('x坐标是' + x, 'y坐标是' + y);
            //3 . 千万不要忘记给left 和top 添加px 单位
            pic.style.left = x - 50 + 'px';
            pic.style.top = y - 40 + 'px';
            });

    (二)键盘事件

        触发事件
        keyCode属性-ASCII

        (1) keyup

            // keyup 按键弹起的时候触发 
            // document.onkeyup = function() {
            //         console.log('我弹起了');
            // }
            document.addEventListener('keyup', function() {
                console.log('我弹起了');
            })

        (2) keypress
            // keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊
            document.addEventListener('keypress', function() {
                    console.log('我按下了press');
            })

        (3)keydown
            // keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊
            document.addEventListener('keydown', function() {
                console.log('我按下了down');
            })

        <!>三个事件的执行顺序 (队列)  keydown -- keypress -- keyup

                                        keyCode属性

                // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
                /1. 我们的keyup 和keydown事件不区分字母大小写  a 和 A 得到的都是65/
                /2. 我们的keypress 事件区分字母大小写  a  97 和 A 得到的是65/

                document.addEventListener('keyup', function(e) {
                    // console.log(e);
                    console.log('up:' + e.keyCode);
                    // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
                    if (e.keyCode === 65) {
                        alert('您按下的a键');
                    } else {
                        alert('您没有按下a键')
                    }

                })
                document.addEventListener('keypress', function(e) {
                    // console.log(e);
                    console.log('press:' + e.keyCode);

                })