document 的冒泡事件与捕获事件

2019-03-17 本文已影响8人 CondorHero

为什么这么写onclick 明显比addEventListener兼容好：

避免事件覆盖
jQuery中用的就是我们的DOM2级，也有轮子。jQuery事件同名不会被覆盖。

一、初识事件流

事件流：简单来讲就是触发事件完成的整个过程。“事件流”描述的是页面上各个元素监听事件的顺序。
事件流包括：

冒泡事件
捕获事件

直接上案例说明，下图。

冒泡实例.gif

这就是我们平常我们写的盒子套盒子的代码。触发从我们直接点击的盒子开始一直到属于监听内容的事件结束。
所以先后显示顺序 box3 box2 box1。这种写法属于 DOM0 级写法，无法监听捕获事件，只能监听冒泡事件。这里需要注意，在IE9、Chrome里面，事件会冒泡到window对象，而IE6、7、8仅仅冒泡到document对象。
另外，用这种方法绑定的监听，this指的是触发这个事件的元素，没有任何的浏览器兼容问题。
DOM0级还有一种写法，直接将监听写在标签里面，像行内样式一样不许用：
<div id="box1" onclick="alert('我是box1');">
DOM 0级特点：

只监听冒泡
程序会覆盖

捕获事件恰好与冒泡事件显示顺序相反。首先熟悉一个新函数addEventListener add:添加 Event:事件 Listener:监听，它写的代码属于 DOM2级事件。
它接受三个参数：什么事件、函数、是否监听捕获阶段。
oBox.addEventListener("click",function(){ },false);
第1个参数：事件名不用写on， click、mouseover 、mouseout
第2个参数：函数可以是匿名函数，也可以是有名函数
第3个参数：布尔值，true表示监听捕获、false表示监听冒泡阶段,不填默认 false。
把上面「冒泡实例」的实例改成此函数，变成捕获事件，则结果显示顺序是 box1 box2 box3。
注意：addEventListener可以重复添加相同事件名的事件，不会覆盖，仍按顺序执行
虽然我们现在不理解机理，但已经掌握冒泡捕获的本质。代码会按顺序执行 先捕获后冒泡

二、原理探究

根据演示效果我们知道代码执行顺序。

代码执行规则

事件流机理.png

捕获阶段capture phase [feɪz]、冒泡阶段bubbling['bʌblɪŋ] phase

三、低版本IE的事件绑定

IE6、7、8不支持addEventListener()方法，支持
oDiv.attachEvent(“onclick”,函数);
没有第三个参数，也就是说，不能选择监听捕获、冒泡。只能监听冒泡。
box1.attachEvent("onclick", function(){alert("box1"); });
第一个参数，必须写on，和addEventListener()不一样；
第二个参数，就是事件处理函数
没有第三个参数，只能监听冒泡。所以和on***写法一样。

低版本IE的事件监听attachEvent事件处理函数里面的this，不是触发事件的这个元素，而是window对象！
box1.attachEvent("onclick", function(){
alert(this === window); //true
});

同一个事件名的多个监听，会反着执行：
box1.attachEvent("onclick", function(){
alert(1);
});
box1.attachEvent("onclick", function(){
alert(2);
});
box1.attachEvent("onclick", function(){
alert(3);
});
弹出3、2、1。

处理addEventListener 与 attachEvent
attachEvent 里面的第一个参数与 addEventListener 的写法不同，且attachEvent 没有第三个参数。

<script >
        //绑定事件，三个参数。
        //第一个参数，需要绑定事件的元素
        //第二个参数，事件名，没有on
        //第三个参数，事件处理函数
        function addEvent(obj,eventtype,fn){
            if(obj.addEventListener){
                obj.addEventListener(eventtype,fn,false);
            }else if(obj.attachEvent){
                obj.attachEvent("on" + eventtype,function(){
                    fn.call(obj);
                });
            }else{
                obj["on" + eventtype] = fn;
            }
        }

        var oDiv = document.getElementsByTagName("div")[0];

        addEvent(oDiv,"click",function(){
            this.style.backgroundColor = "red";
        });
    </script>

四、事件对象 event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> </title>
    <style>
        div {
            height: 200px;
            width: 200px;
            background-color: #333;
        }
    </style>
</head>
<body>
    <div id = "box"><div></div></div>
    <script>
        var odiv = document.getElementById("box");
        odiv.onclick = function(event){
            console.log(event.clientX,event.clientY);
            console.log(event.type);
            console.log(event.target);
            console.log(event.currentTarget);
            console.log(event.bubbles);
        }
    </script>
</body>
</html>

点击结果

通用事件对象属性和方法:
● event.type 返回事件的类型，没有on，比如”click”
● event.target 返回你点击的最小的那个元素，即使这个元素身上没有监听，也是返回它
● event.currentTarget 返回自己，this一定和event.currentTarget是一个元素，都是自己
● event.bubbles 返回一个布尔值，表示这个事件是否冒泡
比如onmouesover的event.bubbles就是true;
但是onmouseenter的 event.bubbles就是false;
● stopPropagation() 停止传播事件流
event.stopPropagation();

● preventDefault() 阻止默认事件
event.preventDefault();

五、 clientX、clientY、screenX、screenY、pageX、pageY

clientX表示鼠标的位置，距离浏览器窗口左边边的距离

clientY表示鼠标的位置，距离浏览器窗口上边边的距离

screenX表示鼠标的位置，距离屏幕左边边的距离

screenY表示鼠标的位置，距离屏幕上边边的距离