一. 事件对象
在触发 DOM 上的某个事件时，会产生一个事件对象 event ，这个对象中包含着所有与事件有关的
信息。
包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而键盘操作导致的事件对象中，会包含与按下的键有关的信息。所有
浏览器都支持 event 对象，但支持方式不同。
无论哪种事件处理程序，都会有一个
event的参数，包含着事件的基本信息。<body> <button id="btn">点我获取点击的click事件的事件类型</button> <script type="text/javascript"> var btn = document.getElementById("btn"); //当点击事件发生的时候，浏览器会把发生的这次点击封装成一个事件对象，通过时间处理程序的参数传进来。 //在处理程序内部就可以使用这个事件对象了。 btn.onclick = function (event) { alert(event.type); // click } </script> </body
事件类型不一样，
event可用的属性与方法也不一样。不过不管哪种类型的事件，都具有下面的属性和方法。
| 属性 / 方法 | 类 型 | 读 / 写 | 说 明 |
|---|---|---|---|
| bubbles | Boolean | 只读 | 表明事件是否冒泡 |
| cancelable | Boolean | 只读 | 表明是否可以取消事件的默认行为 |
| currentTarget | Element | 只读 | 其事件处理程序当前正在处理事件的那个元素(注册事件处理程序的元素) |
| defaultPrevented | Boolean | 只读 | 为 true 表 示 已 经 调 用 了 preventDefault(DOM3级事件中新增) |
| detail | Integer | 只读 | 与事件相关的细节信息 |
| eventPhase | Integer | 只读 | 调用事件处理程序的阶段：1表示捕获阶段，2表示“处于目标”，3表示冒泡阶段 |
| stopPropagation() | Function | 只读 | 取消事件的进一步捕获或冒泡。如果 bubbles为 true ，则可以使用这个方法 |
| preventDefault() | Function | 只读 | 取消事件的默认行为。如果 cancelable 是true ，则可以使用这个方法 |
| stopImmediatePropagation() | Function | 只读 | 取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用（DOM3级事件中新增） |
| target | Element | 只读 | 事件的目标(事件发生的目标元素) |
| trusted | Boolean | 只读 | 为 true 表示事件是浏览器生成的。为 false 表示 事 件 是 由 开 发 人 员 通 过 JavaScript 创 建 的（DOM3级事件中新增） |
| type | String | 只读 | 被触发的事件的类型 |
| view | AbstractView | 只读 | 与事件关联的抽象视图。等同于发生事件的window 对象 |
二. event对象的高级属性
2.1 offsetX和offsetY
光标相对于触发元素边界的X、Y坐标
其实是光标相对于触发元素的==左上角==的坐标。(把左上角的位置看做0，0)
<body>
<div></div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
div.addEventListener("mousemove", function (event) {
console.log('offsetX:' + event.offsetX + ", offsetY:" + event.offsetY);
}, false);
</script>
</body>
2.2 screenX和screenY
当前光标相对于屏幕边缘的x、y坐标
其实就是相对于屏幕左上角的坐标。(可以看出是绝对坐标)
<body>
<div></div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
document.documentElement.addEventListener("mousemove", function (event) {
// console.log('offsetX:' + event.offsetX + ", offsetY:" + event.offsetY);
console.log("scrrenX:" + event.screenX + ", scrrenY:" + event.screenY);
}, false);
</script>
</body>
2.3 clientX和clientY
当前光标相对于浏览器浏览器窗口客户区域左上角的坐标(客户区域不包括状态栏、菜单栏等。)
三种坐标的图示如下：
2.4 stopPropagation()
如果bubbles是true(允许冒泡)，则stopPropagation可以阻止事件进一步捕获或冒泡
正常情况当把鼠标放在外部div和内部div重合的区域的时候，外部个div都可以收到事件。
当在内部div的处理程序添加stopPropagation()方法后,则鼠标放在重合区域的上方是外部div就收不到冒泡事件了
<body>
<div id="outer">
<div id="inner"></div>
</div>
<script type="text/javascript">
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");
outer.addEventListener("mouseover", function (event) {
console.log("外部的div....")
}, false);
inner.addEventListener("mouseover", function (event) {
console.log("内部的div");
event.stopPropagation();
}, false);
</script>
</body>
2.5 preventDefault()
取消事件的默认行为：
<body>
<form id="form" action="">
<input type="text" name="user"><br/><br/>
<input type="submit" value="提交">
<p>本演示可以阻止提交按钮默认提交表单的动作</p>
</form>
<script type="text/javascript">
var form = document.getElementById("form");
form.addEventListener("submit", function (event) {
//阻止表单的默认提交事件
event.preventDefault();
}, false);
</script>
</body>
2.6 补充：pageX和pageY
获取光标在文档中的位置。
注意：这个之和整个页面的左上角有关，与元素的位置无关。
如果页面进行的滚动，即使光标没有任何移动，那么pageY也会变化。
而这种情况下clientY是没有变化的。