事件对象
我们给当前的行为绑定了一个函数,我们一去执行这个行为,我们一去执行这个行为会去自动的执行这个函数,只要是执行了这个函数,就会给这个函数默认传一个参数,这个参数就叫做事件对象,这个事件对象记录了触发事件一瞬间的信息
MouseEvent 鼠标事件对象
keyboardEvent 键盘事件对象
同一个事件行为绑定的一个函数,每一次触发事件行为执行这个函数传的事件对象都是不一样的
当点击box的时候也会同时触发body的onclick的事件行为,点一下,浏览器只会得到一个事件对象,把同一个事件对象传给了两个函数,此时就点击了一下,只有一个鼠标,浏览器只会得到一个事件对象,只不过是将同一个事件对象分别传给了两个函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">点我</div>
<script>
var box=document.getElementById('box');
box.onclick=function(e){
console.log(e);//MouseEvent {isTrusted: true, screenX: 38, screenY: 87, clientX: 38, clientY: 21, …}
}
</script>
</body>
</html>
事件对象下面的一些属性
//e:mouseEvent 鼠标事件对象
e.clientX//记录当前点击的那一瞬间鼠标距离屏幕左边的距离
e.clientY//记录当前点击的那一瞬间鼠标距离屏幕左边的距离
//pageX,pageY有兼容性,低版本浏览器下面没有pageX和pageY属性
e.pageX//记录当前点击的那一瞬间鼠标距离整个网页左边的距离
e.pageY//记录当前点击那一瞬间鼠标距离整个网页上边的距离
e.target//事件源,当前触发事件的元素
e.type//事件类型 DOM2级事件绑定的第一个参数
处理兼容(IE低版本浏览器中没有这些属性,所以要处理一下兼容)
事件对象e
1.低版本浏览器下,没有事件e这个事件对象,在低版本浏览器下不会默认传参数,形参位置的e就是undefined,低版本浏览器下事件对象就要用window.event
低版本浏览器中也没有e.target属性
2.e.srcElement //事件源:window.event.srcElement
我点box的时候由于事件冒泡,也会触发body执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">点我</div>
<script>
var box=document.getElementById('box');
box.onclick=function(e){//点的是box,此处的事件源是srcElement
//box触发的事件对象和body的触发的事件对象是一样的
console.log(e);//MouseEvent {isTrusted: true, screenX: 38, screenY: 87, clientX: 38, clientY: 21, …}
}
document.body.onclick=function(e){//点的是box,此处的事件源也是srcElement
//box触发的事件对象和body的触发的事件对象是一样的
//当点击box的时候也会触发body的onclick,事件源是box
console.log(e);
}
</script>
</body>
</html>
总结:鼠标只有一个,然后只点了一下,点的位置也是同一个,浏览器把事件对象同时传给了两个函数当形参,这个两个事件对象是同一个事件对象
给谁绑的跟事件源有关系嘛?
操作的哪个元素,事件源就是什么
