1.前言
- 定义 ：当一个Dom元素触发事件时，系统会生成一个对象来记录事件触发时的一些信息，比如鼠标坐标，按键信息，并将此作为参数传入回调函数中
document.querySelector('#box').onclick = function(e) {
//IE8不需要传递参数，直接用window.event获取
//最新的谷歌和火狐也支持window.event
var e = e || window.event;
console.log(e);
}
- 通过HTML标签直接绑定事件时，可通过event直接访问事件对象
<button onclick="func(event，123)" id="btn">点我</button>
function func(event,num){
console.log(event,num)
}
2.点击位置的坐标信息
| 属性 |
说明 |
| e.offsetX/e.offsetY |
距离当前元素边框的距离 |
| e.clientX/e.clientY |
距离浏览器边框的可视距离 |
| e.pageX/e.pageY |
距离浏览器边框的距离（加上被滚动条隐藏的距离） |
| e.screenX/e.screenY |
距离屏幕边框的距离 |
3.事件Dom
| 属性 |
说明 |
| e.target |
事件源头，通俗的说就是Dom嵌套时，最里面的Dom元素，利用这个属性可以做事件代理 |
| e.currentTarget |
当前回调函数对应的Dom，也就是函数中的this |
4.阻止默认事件
- 标准浏览器 e.preventDefault()
- IE8浏览器 e.returnValue = false; (最新的谷歌火狐浏览器也支持这个,IE8以上不支持，奇葩)
- return false可以阻止默认事件，但不能阻止冒泡（用addEventListener添加事件监听，不能使用return false来阻止）
<body>
<a href="http://www.baidu.com/">百度一下</a>
</body>
<script>
window.onload = function(){
var a = document.querySelector('a');
a.onclick = function(e){
e = e || window.event
if (e.preventDefault) {
//iE8没有这个属性，有这个属性的都是更高级的浏览器
e.preventDefault();//阻止默认
} else {
//IE8
e.returnValue = false;//阻止默认
}
}
}
</script>
5.阻止事件传递
- e.stopPropagation()：用来阻止事件传递，包括冒泡和捕获（IE8浏览器用 e.cancelBubble=true最新的标准浏览器也支持这个）
<body>
<ul>
<li onclick="console.log('click li')">li</li>
</ul>
</body>
<script>
var ul = document.querySelector('ul')
ul.addEventListener('click',function(e){
console.log('click ul')
//阻止传递（捕获）
e.stopPropagation()
},true)
//点击后只打印click ul
</script>
<body>
<ul onclick="console.log('click ul')">
<li>li</li>
</ul>
</body>
<script>
var li = document.querySelector('li')
li.addEventListener('click',function(e){
console.log('click li')
//阻止传递（冒泡）
e.stopPropagation()
},false)
//点击后只打印click li
</script>
- e.stopImmediatePropagation()：不仅阻止事件传递，还可以阻止同元素同事件名称下的后续回调执行
<script>
var li = document.querySelector('li')
li.addEventListener('click',function(e){
console.log('click li - 1')
//阻止同类事件后续回调
e.stopImmediatePropagation()
},false)
li.addEventListener('click',function(e){
console.log('click li - 2')
},false)
//点击后只打印click li - 1
</script>
