js中的event对象的使用

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

1 事件对象的作用

主要是用于存储事件的相关信息,事件对象由用户产生的（用户触发鼠标事件，键盘事件等）
事件存储数据有,按的那个键盘,触发的哪个事件,当前点击光标所在位置等等.还有其他很多信息,但是大家平常基本都用不上.
事件对象也可以阻止事件流，阻止浏览器默认动作等,这个在我们的工作中使用的还是比较多的.

2、获取事件对象

因为兼容的问题,不同浏览器获取事件对象的方法也不一样,这点大家使用的时候要注意.(兼容是前端最让人头疼的地方)

ie6、7、8获取事件对象的方法(现在基本没有,知道就好)

节点对象.事件类型 = function() {
    console.log(window.event);
}

注意哈,event对象在函数体内才有

主流浏览器的获取方法

节点对象.事件类型 = function(evt) {
    console.log(evt); //相当于 window.event
}

直接在事件后面写回调函数,触发事件的时候,系统会自动的给回调函数穿递event对象.我们使用参数接收,就可以直接获取了.
后面是兼容的写法,工作中都是这么写的.大家记住这个就行了.

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

图片.png

图片.png

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

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

图片.png

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

3）阻止事件流

关于事件流这块的,大家看一看,在嵌套元素的时候,使用的比较多.
ie6、7、8：event.cancelBubble=true;
主流浏览器：evt.stopPropagation();

图片.png

!DOCTYPE html>


    
    
    



    

        

            
        
    
  

写在最后
以上就是关于event对象的总结,大家如果有什么问题,欢迎在下方留言讨论.看完之后顺手已赞,你是最帅的,哈哈!