js中的event对象的使用

最近发现身边的一些技术人员,对于事件对象,不了解其原理,只知道基本的使用,所以我在此整理了事件对象的知识点.

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() {} 监听表单是否提交

上代码,大家来看.

图片.png

好多人搞不清楚,submint和onsubmit,下面详细说一下
submit是js去提交表单，onsubmit是监听表单是否提交；
通过js的submit方法提交表单，不会触发onsubmit事件，原因：一个由用于触发，另个是由程序触发的；

2）阻止浏览器默认动作
Event对象的在我们的使用中,另一个重大作用就是阻止默认动作.比如像要使用a标签的样式,但是不想要跳转功能.

DOM1级事件                           return false；
DOM1级事件或者DOM2级事件    evt.preventDefault();

图片.png

2）事件对象中记录的鼠标位置
我们工作中很多的时候要制作各种特效,比方元素跟随鼠标的移动等,这个时候都要获取鼠标的各种坐标.其实这些呢,大家不用去记单词,主要知道有这个属性就行,用的时候查一查.

evt.screenX 相对于屏幕的左上角为原点
evt.screenY 
evt.clientX 相对于浏览器的客户端左上角为原点（不计算滚动条位置）
evt.clientY 
evt.pageX   相对于浏览器的客户端左上角为原点（计算滚动条的位置）
evt.pageY   
evt.offsetX 以自己的左上角为原点
evt.offsetY

图片.png

这里来个小案例,就是点击添加星星

<!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();

图片.png

!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对象的总结,大家如果有什么问题,欢迎在下方留言讨论.看完之后顺手已赞,你是最帅的,哈哈!

js中的event对象的使用

推荐阅读更多精彩内容