javascript事件处理二 事件对象event详解及target和currentTarget区别

在处理事件的时候，所有和事件相关的东西都封装到event这个对象里面。所以这个对象非常的重要。这个对象有非常多的内容，我们讨论几个计较常见和以及比较难区别的target和currentTarget。

常见属性

页面就是一个div，然后我们监听他的oclick事件。

type属性:
这个属性返回事件类型，我们监听的是点击事件，所以返回的是click，注意前面是没有加on的,别的事件都是类似的，只是没有开头的on。

boxContent.onclick = function (event) {
    //事件类型
	console.log("type:"+event.type);//click
}
1
2
3
4

clientX和clientY:
这个相对于视口原点，返回点击位置的坐标，非常好理解。

//相对于视口原点(左上角)
console.log("clientX:"+event.clientX+" clientY:"+event.clientY);
1
2

pageX和pageY:
相对于页面，当发生向下滚动的时候，相对于滚动前的原点((左上角))。和clientX/Y只是有没有滚动的区别。

//相对于页面，当发生向下滚动的时候，相对于滚动前的原点((左上角))
console.log("pageX:"+event.pageX+" pageY:"+event.pageY);
1
2

screenX和screenY:
相对于屏幕，而不是浏览器。

//相对于屏幕，而不是浏览器
console.log("screenX:"+event.screenX+" screenX:"+event.screenY);
1
2

下面的属性需要修改一下页面测试。
仅仅是在div里面套了一个span。
还是只监听div的onclick方法。
还是只监听div的onclick方法。
还是只监听div的onclick方法。

eventPhase:
我们分别点击黄色的span区域和绿色的div区域

//监听div的onclick方法
console.log("eventPhase:"+event.eventPhase);
1
2

分别输出3和2。那么3和2代表什么意思呢？其实就是指的下图的三个阶段。大部分浏览器默认情况下都是通过冒泡来处理的，也就是点击span的时候，div要在冒泡阶段(3)才能接收到这个事件。而直接点击div的时候，div在目标阶段（2）就开始处理事件了。也可以设置默认的处理方式为捕获(1)。得出的结果就是1和2。如果不能理解，仔细阅读上一篇文章。

target和currentTarget区别：
这个是最重要的一个内容的，前面的内容实际上很少用到，这个却比较常用。
还是上面的情况，如果我只是点击div的部分，那么这两个变量是一样的。

console.log(event.target===event.currentTarget)
1

但如果我点击的是span,就不一样了。我们还是要看上面这张图target指的就是target phase的这个target。也就是点击事件实际上是发生在span身上的（因为span是dom的最里层）。而我们的onclick监听是注册在div身上的，也就是处理是发生在div身上的，也就是我们的currentTarget。

这个内容非常重要，后面的内容需要这个为基础，好好理解一下。

        //事件发生的地方
        console.log(event.target);
        //事件正在处理的地方
        console.log(event.currentTarget);
1
2
3
4

常见方法

阻止默认行为

这个非常的简单，有些时候，我们不希望控件的默认按钮生效，例如没有权限，或者不能满足触发的条件。这时候就可以通过preventDefault阻止默认行为。

    var a = document.querySelector("a");
    a.onclick=function (event){
        event.preventDefault()
    }
1
2
3
4

阻止事件传递

实现下面的效果，div里面有span,span里面有button。监听这三个元素的捕获和冒泡。然后我们点击按钮。

<div class="box">
    <span>
        <button>按钮</button>
    </span>
</div>
1
2
3
4
5

    <style rel="stylesheet">
        div {
            width: 500px;
            height: 500px;
            background-color: lightgreen;
        }

        span {
            display: block;
            width: 200px;
            height: 200px;
            background-color: gold;
        }
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

    var divEl = document.querySelector(".box");
    var spanEl = document.querySelector("span");
    var btnEl = document.querySelector("button");

    divEl.addEventListener("click",function (){
        console.log("div的事件捕获监听");
    },true)

    spanEl.addEventListener("click",function (){
        console.log("span的事件捕获监听");
    },true)

    btnEl.addEventListener("click",function (){
        console.log("button的事件捕获监听");
    },true)

    divEl.addEventListener("click",function (){
        console.log("div的事件冒泡监听");
    })

    spanEl.addEventListener("click",function (){
        console.log("span的事件冒泡监听");
    })

    btnEl.addEventListener("click",function (){
        console.log("button的事件冒泡监听");
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

就可以得到下面的结果。

这个执行顺序就是整个事件传递的过程，我们希望在某个过程后事件就停止传递。就可以下下面的代码。例如我想执行div的捕获后，也就是第一个事件后就立刻停止传递。就可以写下面的代码。

    divEl.addEventListener("click",function (event){
        console.log("div的事件捕获监听");
        event.stopPropagation()
    },true)
1
2
3
4

事件监听this的指向

我们直接打印就知道了。直接说结论，不管是通过什么方式监听，不管监听的元素是作为子元素或者父元素，this都指向这个元素自身。

    divEl.addEventListener("click",function (event){
        console.log(this)
    })

    divEl.onclick=function (){
        console.log(this)
    }
1
2
3
4
5
6
7

下面的等式都是返回true。

    divEl.addEventListener("click",function (event){
        console.log(this)
        console.log(event.currentTarget===this)
        console.log(divEl===this)
    })
1
2
3
4
5