最近发现身边的一些技术人员,对于事件对象,不了解其原理,只知道基本的使用,所以我在此整理了事件对象的知识点.
1 事件对象的作用
主要是用于存储事件的相关信息,事件对象由用户产生的（用户触发鼠标事件，键盘事件等）
事件存储数据有,按的那个键盘,触发的哪个事件,当前点击光标所在位置等等.还有其他很多信息,但是大家平常基本都用不上.
事件对象也可以阻止事件流，阻止浏览器默认动作等,这个在我们的工作中使用的还是比较多的.
2、获取事件对象
因为兼容的问题,不同浏览器获取事件对象的方法也不一样,这点大家使用的时候要注意.(兼容是前端最让人头疼的地方)
ie6、7、8获取事件对象的方法(现在基本没有,知道就好)
节点对象.事件类型 = function() {
console.log(window.event);
}
注意哈,event对象在函数体内才有
主流浏览器的获取方法
节点对象.事件类型 = function(evt) {
console.log(evt); //相当于 window.event
}
直接在事件后面写回调函数,触发事件的时候,系统会自动的给回调函数穿递event对象.我们使用参数接收,就可以直接获取了.
后面是兼容的写法,工作中都是这么写的.大家记住这个就行了.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div1" style="width: 100px; height: 100px; background: red;"></div>
<script type="text/javascript">
div1.onclick = function(evt) {
var evtObj = evt ? evt : window.event;
console.log(evtObj);
}
</script>
</body>
</html>
3、事件对象的使用场景
1）判断是否回车表单提交
我们通过绑定键盘事件onkeydown,进而获取event对象,再通过event得到当前点击的键盘上的键盘码,通过键盘码判断是否点击了回车.
使用到的知识点:
表单对象.submit() 提交表单
表单对象.onsubmit = function() {} 监听表单是否提交
上代码,大家来看.
好多人搞不清楚,submint和onsubmit,下面详细说一下
submit是js去提交表单，onsubmit是监听表单是否提交；
通过js的submit方法提交表单，不会触发onsubmit事件，原因：一个由用于触发，另个是由程序触发的；
2）阻止浏览器默认动作
Event对象的在我们的使用中,另一个重大作用就是阻止默认动作.比如像要使用a标签的样式,但是不想要跳转功能.
DOM1级事件 return false；
DOM1级事件或者DOM2级事件 evt.preventDefault();
2）事件对象中记录的鼠标位置
我们工作中很多的时候要制作各种特效,比方元素跟随鼠标的移动等,这个时候都要获取鼠标的各种坐标.其实这些呢,大家不用去记单词,主要知道有这个属性就行,用的时候查一查.
evt.screenX 相对于屏幕的左上角为原点
evt.screenY
evt.clientX 相对于浏览器的客户端左上角为原点（不计算滚动条位置）
evt.clientY
evt.pageX 相对于浏览器的客户端左上角为原点（计算滚动条的位置）
evt.pageY
evt.offsetX 以自己的左上角为原点
evt.offsetY
这里来个小案例,就是点击添加星星
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
//1. 给屏幕添加点击事件 onclick
document.onclick = function(evt) {
var evtObj = evt ? evt : window.event;
//2. 在页面追加星星
//2.1 创建img标签
var imgObj = document.createElement('img');
//2.2 给img标签设置src属性
imgObj.setAttribute('src', 'star.gif');
//获取对象默认宽度
//console.log(imgObj.width);
//2.3 设置对象宽度
imgObj.width = imgObj.width * Math.random();
//2.4设置定位
imgObj.style.position = 'absolute';
imgObj.style.top = evtObj.clientY + 'px';
imgObj.style.left = evtObj.clientX + 'px';
//理论核心DOM（1）得一层一层获取，但是获取body可以直接获取
document.body.appendChild(imgObj);
}
</script>
</body>
</html>
3）阻止事件流
关于事件流这块的,大家看一看,在嵌套元素的时候,使用的比较多.
ie6、7、8：event.cancelBubble=true;
主流浏览器：evt.stopPropagation();
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1 {width: 800px; height: 800px; background: red;}
#div2 {width: 400px; height: 400px; background: blue;}
#div3 {width: 200px; height: 200px; background: green;}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
</div>
</div>
</div>
<script type="text/javascript">
div1.addEventListener('click', function(evt){
var evtObj = evt ? evt : window.event;
alert(1);
evtObj.stopPropagation();
});
div2.addEventListener('click', function(evt){
var evtObj = evt ? evt : window.event;
alert(1);
evtObj.stopPropagation();
});
div3.addEventListener('click', function(evt){
var evtObj = evt ? evt : window.event;
alert(1);
evtObj.stopPropagation();
});
</script>
</body>
</html>
写在最后
以上就是关于event对象的总结,大家如果有什么问题,欢迎在下方留言讨论.看完之后顺手已赞,你是最帅的,哈哈!
