JS-DOM— —事件对象

最新推荐文章于 2023-05-02 22:47:54 发布

墨_风

最新推荐文章于 2023-05-02 22:47:54 发布

阅读量158

点赞数

分类专栏：学习笔记文章标签： javascript dom

本文链接：https://blog.csdn.net/mocoll/article/details/119810901

版权

学习笔记同时被 2 个专栏收录

207 篇文章 1 订阅

订阅专栏

前端

107 篇文章 1 订阅

订阅专栏

四、事件对象

var div = document . querySelector('div');

div .onclick = function(event) { }

1.event 就是一个事件对象写到侦听函数的小括号里面当形参来看。

2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数。

3.事件对象是我们事件的一系列相关数据的集合跟事件相关的（比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标等）（如果是键盘事件里面就包含的键盘事件的信息比如判断用户按下了那个键）

4.这个事件对象我们可以自己命名比如event 、evt、 e

5.事件对象也有兼容性问题ie678通过window.event

4.1、事件对象概述

var div = document.querySelector( 'div');

div .onclick = function(event) { }

官方解释: event对象代表事件的状态.比如键盘按键的状态鼠标的位置、鼠标按钮的状态。

简单理解:事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象event,它有很多属性和方法。

比如:

1.谁绑定了这个事件。

2.鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置.

3.键盘触发事件的话,会得到键盘的相关信息,如按了哪个键。

这个event是个形参,系统帮我们设定为事件对象,不需要传递实参过去。

当我们注册事件时, event对象就会被系统自动创建,并依次传递给事件监听器(事件处理函数)。

4.2、事件对象的兼容性方案

事件对象本身的获取存在兼容问题:

1.标准浏览器中是浏览器给方法传递的参数,只需要定义形参e就可以获取到。

2.在lE6~8中,浏览器不会给方法传递参数,如果需要的活,需要到window.event中获取查找。

解决:

e = e || window. event;

4.3、事件对象的常见属性和方法

在这里插入图片描述

①e.target

在这里插入图片描述

跟this有个非常相似的属性currentTarget ie678不认识

②、e.type

在这里插入图片描述

③、e.preventValue()

在这里插入图片描述

// 传统的注册方式

a.onclick = function(e) {  //普通浏览器e. preventDefault(); 方法

e.preventDefault();  //低版本浏览器ie678 returnValue 属性

e.returnVatue ;   //我们可以利用return false 也能阻止默认行为没有兼容性问题

return false；   //特点：组织后面的代码执行，看到return 后面的代码都不会执行。

}