DOM中的event对象详解 — 第13.3.1节

来源：互联网发布：linux环境变量的作用编辑：程序博客网时间：2024/05/01 01:40

理解事件对象

追根溯源事件对象，才发现自己会的微不足道！

在触发DOM的事件的时候，浏览器会默认产生一个event对象，这个对象包含了所有与该事件有关的信息，比如：鼠标点击页面的某个按钮会让事件对象中包含对象的节点、鼠标的位置….等信息。
一：对于直接在html里写入的事件，通过变量event来输出event对象：

<input type="button" value="按钮3" onmouseover="console.log(event)">

二：event对象有是什么呢？不要怕，慢慢来看：
这里写图片描述
三：this、e.target和e.currentTarget的区别
在事件处理程序的内部，对象this始终等于currentTarget，而target则只包含事件的实际目标。
公共代码：

<input type="button" value="点击1" id="mybtn1"><input type="button" value="点击2" id="mybtn2"><input type="button" value="点击4" id="mybtn4"><a href="http://www.baidu.com" id="mybtn3">百度</a>

情况一：直接将事件处理程序指定给目标（两者相等）

    btn.addEventListener('mouseover',function(e){        console.log(e)        console.log(e.type);         //mouseover        console.log(e.currentTarget);//<input type="button" value="点击" id="mybtn">        console.log(e.target);       //<input type="button" value="点击" id="mybtn">    },false);

情况二：事件处理程序指定在按钮的父节点中（两者不相等）

    document.body.onclick = function(e){        console.log(this);          //body...</body>        console.log(e.currentTarget);//body...</body>        console.log(e.target);      //<div id="mybtn2"></div>    }

总结各个情况：当eventPhase等于2的时候，this、target和currentTarget始终是相等的,其余别的情况，两者不相等。

btn4.onclick = function(e){    console.log(e.eventPhase);  //2}document.body.addEventListener('click',function(e){    console.log(e.eventPhase);  //1},true);document.body.onclick = function(e){    console.log(e.eventPhase);  //3}

四：一个函数处理多个事件的方法？

var handler = function(event){    switch(event.type){        case 'click':            alert('clicked');            break;        case 'mouseover':            event.target.style.backgroundColor = 'red';            break;        case 'mouseout':            event.target.style.backgroundColor = '';            break;    }};btn1.onclick = handler;btn2.onmouseover = handler;btn2.onmouseout = handler;

五：stopPropagation和preventDefault用法

//stopPropagation取消事件进一步捕获或者冒泡//preventDefault取消事件默认行为//defaultPrevented的值为true的时候表示调用了preventDefault()方法btn3.onclick = function(e){    alert('click');    e.stopPropagation();    e.preventDefault();    console.log(e.defaultPrevented);//true}document.body.onclick = function(e){    alert('Body Clicked');}

只有在事件处理程序执行的时候，event才会被创建，处理程序执行完成的时候event被销毁

1 0