关于小米
27岁，山西运城人，职业电商经理人，前端开发工作者,从事过网站建设、网络推广、SEO、SEM、信息流推广、二类电商、网络运维、软件开发，等相关电商工作，经验较为丰富，小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]
E-mail:mzze@163.com
Q Q:32362389
W X:xiaomi168527
关于王飞
27岁，山西运城人，职业电商经理人，网络工程师兼运维，从事过运营商网络建设，企业网络建设、优化。数据中心网络维护等通过，经验丰富，座右铭：当自己休息的时候，别忘了别人还在奔跑。 ...[更多]
关于小艳
大于花一样的年龄，河南郑州是我家，2010年在北京接触团购网，2011年进入天猫淘宝一待就是四年，如今已经将设计走向国际化（ps:误打误撞开始进入阿里巴巴国际站的设计，嘿嘿）五年电商设计，丰富经验，从事过天猫淘宝阿里各项设计，店铺运营，产品拍摄；我将我的经历与您分享是我的快乐！座右铭：越努力越幸运！ ...[更多]
E-mail:97157726@qq.com
Q Q:97157726
事件对象就是当事件触发时用来记录事件相关信息的值
详细介绍:
事件的触发，大部分情况下是用户的一种行为，也就是说，我们并不能确定用户什么时间触发；
而且，由于事件的传播机制，我们甚至不能确定事件具体触发在哪个节点；这是一件很不爽的事情；
如何解决呢？
事件发生以后，系统会调用我们写好的[事件处理程序]
系统会在调用处理程序时，将事件发生时有关事件的一切信息，封装成一个对象，
作为参数传给监听函数(事件处理程序)，我们把这个对象称为 事件对象。
W3C标准浏览器（非IE浏览器） 事件处理函数中，第一个参数，会自动传过来一个事件对象
//以下写法IE浏览器不支持
window.onkeyup = function(e){
console.log(e);
}
//完整写法
window.onkeyup = function(e){
var evt = e || window.event;
console.log(evt);
}注意:直接写eIE浏览器不支持,IE浏览器的获取方式是 window.event,所以要用完整写法
event.bubbles | 属性返回一个布尔值，表示当前事件是否会冒泡; |
| event.eventPhase | 返回一个整数值，表示事件流在传播阶段的位置;0:事件目前没有发生。 1:事件目前处于捕获阶段。 2:事件到达目标节点。 3:事件处于冒泡阶段 |
| event.type | 返回一个字符串，表示事件类型，大小写敏感; |
| event.timeStamp | 返回一个毫秒时间戳，表示事件发生的时间; |
| clientX、clientY | 通用,推荐;获取鼠标事件触发的坐标(可视化界面,不包含工具栏等位置) |
| pageX、pageY | 标准浏览器,版本高的浏览器 |
| offsetX、offsetY | IE浏览器用 |
| key | 直接显示键盘输入的是什么 |
| keyCode | 键盘输入的对应的键盘编码,该属性声明了被敲击的键生成的 Unicode 字符码。 |
由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父 节点上，由父节点的监听函数统一处理多个子元素的事件。 这种方法叫做事件的代理也叫 事件委托 也有人称为 事件代理
| event.target | 返回事件发生的节点。对事件起源目标的引用，属性返回触发事件的那个节点。 |
| event.currentTarget | 返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点。 |
<head>
<title></title>
<meta charset="UTF-8">
<style>
div{padding: 40px}
#div3{width: 300px;height: 300px;border: 1px solid red;}
#div2{width: 200px;height: 200px;border: 1px solid red;}
#div1{width: 100px;height: 100px;border: 1px solid red}
</style>
</head>
<body>
<div id="div3">3
<div id="div2">2
<div id="div1">1</div>
</div>
</div>
</body>
<script>
var d = document.getElementById('div3');
d.onclick = function(e){
// this.style.backgroundColor = 'green' //如果写this,因为冒泡作用,不论点击哪个div,所有的div都会变红
e.target.style.background = 'red'; //用target点哪个哪个变红
}
</script>
| 属性 | 描述 |
|---|---|
| altKey | 返回当事件被触发时，"ALT" 是否被按下。 |
| button | 返回当事件被触发时，哪个鼠标按钮被点击。 |
| clientX | 返回当事件被触发时，鼠标指针的水平坐标。 |
| clientY | 返回当事件被触发时，鼠标指针的垂直坐标。 |
| ctrlKey | 返回当事件被触发时，"CTRL" 键是否被按下。 |
| metaKey | 返回当事件被触发时，"meta" 键是否被按下。 |
| relatedTarget | 返回与事件的目标节点相关的节点。 |
| screenX | 返回当某个事件被触发时，鼠标指针的水平坐标。 |
| screenY | 返回当某个事件被触发时，鼠标指针的垂直坐标。 |
| shiftKey | 返回当事件被触发时，"SHIFT" 键是否被按下。 |
除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性：
| 属性 | 描述 |
|---|---|
| cancelBubble | 如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。 |
| fromElement | 对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。 |
| keyCode | 对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。 |
| offsetX,offsetY | 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。 |
| returnValue | 如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。 |
| srcElement | 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。 |
| toElement | 对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。 |
| x,y | 事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。 |
下面列出了 2 级 DOM 事件标准定义的属性。
| 属性 | 描述 |
|---|---|
| bubbles | 返回布尔值，指示事件是否是起泡事件类型。 |
| cancelable | 返回布尔值，指示事件是否可拥可取消的默认动作。 |
| currentTarget | 返回其事件监听器触发该事件的元素。 |
| eventPhase | 返回事件传播的当前阶段。 |
| target | 返回触发此事件的元素（事件的目标节点）。 |
| timeStamp | 返回事件生成的日期和时间。 |
| type | 返回当前 Event 对象表示的事件的名称。 |
下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：
| 方法 | 描述 |
|---|---|
| initEvent() | 初始化新创建的 Event 对象的属性。 |
| preventDefault() | 通知浏览器不要执行与事件关联的默认动作。 |
| stopPropagation() | 不再派发事件。 |
本站内容均为小米原创，转载请注明出处：小米技术社区>> JavaScript事件对象概念和使用方法以及事件委托