博客

4 事件对象

4.1 什么是事件对象

eventTarget. onclick = function (event) {}

eventTa rget . addEventListener(‘click’, function(event) {})

//这个event就是事件对象，我们还喜欢的写成e或者event

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

简单理解:事件发生后，跟事件相关的一系列信息数据的集 合都放到这个对象里面，这个对象就是事件对象

event ，它有很多属性和方法。

比如:

1.谁绑定了这个事件。

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

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

4.2 事件对象的使用语法

eventTarget. onclick = function (event) {


//这个event就是事件对象，我们还喜欢的写成e或者evt

eventTarget . addEventLi stener (‘click’，function (event){


//这个event就是事件对象，我们还喜欢的写成e或者event

})

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

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

4.3 事件对象的兼容性方案

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

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

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

解决:

e=e || window. event;

div. addEventListener( ' click', function(e) {
      console.1og(e);
})
// 1. event
就是一个事件对象写到我们侦听函数的小括号里面当形参来看
//2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
// 3.事件对象是我们事件的一系列相关数据的集合跟事件相关的比如鼠标点击里面就包含了鼠标的相关信
息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息比如判断用户按下了那个键
// 4.这个事件对象我们可以自己命名比如event 、
evt、
// 5.事件对象也有兼容性问题ie678通过window. event  兼容性的写法 e= e || window.event；

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

//常见事件对象的属性和方法
// 1. e.target 返回的是触发事件的对象(元素)
this返回的是绑定事件的对象(元素)
//区别 e. target 点击了那个元素，就返回那个元素this 那个元素绑定了这个点击事件，那么就返回谁
var div = document . querySelector( 'div' );
div. addEventListener( 'click', function(e) {
console.1og(e. target);
console.1og(this);
})
var ul = document . querySelector('ul' );
ul. addEventListener( 'click', function(e) {
//我们给u1绑定了事件那么this就指向ul
console.1og(this);
// e.target 指向我们点击的那个对象谁触发了这个事件我们点击的是1i e. target 指向的就是li
console.1og(e.target);
})
// 2.了解 跟this 有个非常相似的属性currentTarget   ie678不认识

//常见事件对象的属性和方法
// 1.返回事件类型
var div = document . querySelector('div');
div . addEventListener('click', fn);
div. addEventListener( ' mouseover', fn);
div . addEventListener( 'mousout'，fn);
function fn(e) {
console.log(e.type);
}
// 2.阻止默认行为(事件) 让链接不跳转或者让提交按钮不提交
var a = document . querySelector('a');
a. addEventListener('click', function(e) {
e. preventDefault(); // dom 标准写法
})
// 3.传统的注册方式
a.onclick = function(e) {
//普通浏览器e. preventDefault(); 方法
// e. preventDefault();
//低版本浏览器ie678  returnValue属性
// e.returnValue;
//我们可以利用return false 也能阻止默认行为没有兼容性问题特点: return 后面的代码不执行了，而且只限于传统的注册方式
return false;
alert(11);
}