webAPI系列之_7分钟玩转DOM下篇

知识导航：

玩转DOM下篇

6. 事件高级
7. DOM事件流
8. 常用鼠标事件
9. 常用键盘事件

6. 事件高级

传统的的注册时间的方法
如demo.onclick=function(){}这种方式有一个很大的缺点。即同一个元素只能绑定一个事件处理函数。

    <button>按钮</button>
</body>
<script>
    var btn = document.querySelector("button");
    btn.onclick = function() {
	        alert("请输入");
    }
    btn.onclick = function() {
        alert("click");
    }
</script>

这种情况，当事件被触发的时候只会有alert("click");出现。
所以w3c推荐了一种新的方式。它的同一元素的同一事件可以注册多个监听器

6.1 事件监听

方法：
事件源.addEventListener(事件类型，处理函数，[事件流可选参数])有兼容问题ie9以上
值得注意的是这个事件类型一律去掉传统事件前俩个字母on。如onclick写成click即可
解决上面传统注册的问题：

    <button>按钮</button>
</body>
<script>
    var btn = document.querySelector("button");
    btn.addEventListener("click", function() {
        alert("请输入");
    });
    btn.addEventListener("click", function() {
        alert("click");
    });
</script>

结果：

解决兼容问题：
attacheEvent(事件类型，回调函数)事件监听（IE678支持）
这里的事件类型需要加上on
栗子：

btn.attachEvent('onclick', function() {
        alert(11);

兼容写法：
简单封装一个函数

    function addEventListenerNew(element, eventType, fn) {
        if (element.addEventListener) {
            element.addEventListener(eventType, fn);
        } else if (element.attachEvent) {
            element.attachEvent("on" + eventType, fn);
        } else {
            //取对象属性的第二种写法以前说过的=element.onclick
            element['on' + eventType] = fn;
        }
    }

6.2 事件解绑

• 传统方式
  事件源.οnclick="";
• 监听方式：
  事件源.removeEventListener(原来的三参);
• attachEvent解绑：
  事件源.detachEvent(原来俩参);

7. DOM事件流

事件流描述的是一个页面中相互嵌套元素事件的接受顺序，事件发生时会在元素节点之间按照特殊的顺序传播。这个传播顺序就是事件流。
绘图理解：

7.1 DOM事件流会经过的三个阶段

1. 捕获阶段

2. 当前目标阶段（即你所点击的目标，如上图。你本来的目标是孙div）

3. 冒泡阶段
   注意：

• js执行只会选择捕获阶段或者冒泡阶段这两个中的一个为顺序传播
• onclick和attachEvent只能得到冒泡阶段
• addEventListener()的第三个参数若为true则表示用的捕获的顺序，不写或者false则表示用的冒泡
• onblur,onfocus,onmouseenter,onmouseleave是没有冒泡的
  栗子1 事件捕获

    <div>
        <div>
            <div></div>
        </div>
    </div>
    <script>
        var div = document.querySelector("div");
        var divSon = div.children[0];
        var divSun = divSon.children[0];
        // 分别绑定监听事件
        div.addEventListener("click", function() {
            alert("最外层");
        }, true);
        divSon.addEventListener("click", function() {
            alert("中层");
        }, true);
        divSun.addEventListener("click", function() {
            alert("最内层");
        }, true);
    </script>

效果：

栗子1 事件冒泡

    <div>
        <div>
            <div></div>
        </div>
    </div>
    <script>
        var div = document.querySelector("div");
        var divSon = div.children[0];
        var divSun = divSon.children[0];
        // 分别绑定监听事件
        div.addEventListener("click", function() {
            alert("最外层");
        });
        divSon.addEventListener("click", function() {
            alert("中层");
        });
        divSun.addEventListener("click", function() {
            alert("最内层");
        });
    </script>

效果：

7.2 事件对象

什么是事件对象：一句会就是事件处理函数中的内置对象，它储存了跟事件相关的一系列信息数据的集合。如鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置
事件对象的使用：事件触发发生时就会产生事件对象，并且系统会以实参的形式传给事件处理函数（这个实参是系统给的哦，不需要我们）
如：
兼容性问题：在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。
兼容写法：

    <script>
        var div = document.querySelector('div');
        div.onclick = function(e) {
                // 事件对象
                e = e || window.event;
                console.log(e);
        }
    </script>

事件对象常见属性和方法：

7.3 阻止默认行为

html中一些标签有默认行为，例如a标签被单击后，默认会进行页面跳转。可是有些时候我们对a链接有别的用途。我们并不需要它做跳转

        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
             e.preventDefault(); 
        });

7.4 阻止事件冒泡

利用事件对象中的stopPropagation（）；
IE6-8 cancelBubble=true；

栗子：阻止7.1栗子中的冒泡

    <div>
        <div>
            <div></div>
        </div>
    </div>
    <script>
        var div = document.querySelector("div");
        var divSon = div.children[0];
        var divSun = divSon.children[0];
        // 分别绑定监听事件
        div.addEventListener("click", function() {
            alert("最外层");
        });
        divSon.addEventListener("click", function() {
            alert("中层");
        });
        divSun.addEventListener("click", function(e) {
            e = e || window.event;
            if.stopPropagation();
            alert("最内层");

        });

7.5 事件委托

借助于冒泡：事件冒泡本身的特性，会带来的坏处，也会带来的好处。
什么是事件委托：把事情委托给别人做
栗子：

如上图，现在有一个需求要给每一个小li注册一个点击事件。安装传统方法我们需要绑定10次，不要想借助for循环，它也是是绑了10次只不过是解放了我们双手。但是却提高了事件复杂度。
这里我们可以借助冒泡，我们不给li注册事件而是给ul。让它冒泡到ul
代码：

  <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var ul = document.querySelector("ul");
        ul.addEventListener("click", function() {
            alert("您点击了");
        });
    </script>

效果：

8. 常用鼠标事件

8.1 常用鼠标事件对象

8.1.1 获取鼠标在页面的坐标

    <script>
        // 鼠标事件对象 MouseEvent
        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);

        })
    </script>

9. 常用键盘事件

9.1 常用的键盘事件

onkeydown和onkeypress的执行顺序
前者要快与后者
注意什么时候加on什么时候不加。传统要加，addEventListener要去掉

9.2 键盘事件对象

注意：
onkeydown和onkeyup是不区分大小写的。即大小写返回的值相同
onkeypress识别大小写