JS事件对象event
事件对象（事件参数对象，event对象）
1, 什么是事件对象
任何一个事件触发后都会包含一个event对象
event对象中包含与当前事件相关的一些属性和方法。
2, 获取event对象
1， 在HTML中绑定事件
<标记 on事件名="btn(event)">
eg:
<div οnclick="funName(event)">
function btn(event){
事件处理函数
}
注意：
1，event名字不可以更改；
2，事件处理函数中需要带上event形参
2, JS中动态为元素绑定事件
var ele = document.getElementById('id');
ele.onclick = function(event){
event表示的就是事件对象；
}
3， 事件对象的常用属性
1， 事件源
1， 触发当前事件的元素；就是事件源， 一般是标记
2， 获取事件源
通过event.target获取事件源，事件源是一个DOM对象；
(动态绑定中，同this)
2， 鼠标事件的常用属性
鼠标事件--click,mouseover,mouseout,mousemove
鼠标事件属性：
1，元素位置：
offsetX 和 offsetY 用于获取鼠标在元素上的坐标点
元素左上角为(0,0)开始计算
2， 网页位置：
clientX, clientY 获取鼠标在网页上的坐标点
以整个网页左上角为(0,0)点开始计算
3， 屏幕位置：
screenX, screenY 获取鼠标在屏幕上的坐标点
以整个屏幕左上角为(0,0)点开始计算
3, 键盘事件的常用属性
键盘事件 -- keydown, keypress, keyup
1, keypress事件
只有在输入字符的条件下才会被激发
1， which :
当前按下字符的ASCII码
2， key
当前按下的字符
注意： 该事件允许通过一个返回值，通知元素是否要处理该事件；
返回值为true，则正常显示输入的字符；返回值为false则终止显示；
2, keydown事件
只要按下键盘键位的时候就会被触发，无论是否有字符的输入；
1, which: 记录的是键位码，不是ASCII码；
只区分按键，不区分大小写；
大小写字符是统一键位，所以键位码相同；
返回值同keypress
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件对象</title>
<style>
#d1,#d2,#d3{
height:200px;
width:200px;
background:pink;
}
#d2{
background:yellow;
}
#d23{
position: relative;
height:200px;
width:420px;
}
#d3{
position:absolute;
background:green;
top:0px;
right:0px;
display:none;
text-align:center;
line-height:200px;
}
</style>
</head>
<body>
<div id='d1'>鼠标事件</div>
<div id='d23'>
<div id='d2' >鼠标放大效果</div>
<div id='d3'></div>
</div>
<p>
keypress <input type="text" name='uname' id='uname' ><br>
keydown <input type="text" name='nickname' id='nickname' >
</p>
<script>
//获取事件
var eleDiv = document.getElementById('d1');
var eleD2 = document.getElementById('d2');
var eleD3 = document.getElementById('d3');
eleDiv.onclick = function(event){
console.log(event.target);
console.log(this);
}
//鼠标移动事件
eleDiv.onmousemove = function(event){
console.log('元素位置：',event.offsetX,event.offsetY);
console.log('网页位置：',event.clientX, event.clientY);
console.log('屏幕位置：', event.screenX, event.screenY);
}
//鼠标移入事件
eleD2.onmouseover = function(){
eleD3.style.display = 'block';
}
//鼠标移动事件
eleD2.onmousemove = function(event){
eleD3.innerText = event.offsetX + 'X' + event.offsetY;
}
//鼠标移除事件
eleD2.onmouseout = function(){
eleD3.style.display = 'none';
}
//键盘事件,只允许输入数字
document.getElementById('uname').onkeypress = function(event){
if (event.which >= 48 && event.which <=57 )
{
return true;
}
return false;
}
document.getElementById('nickname').onkeydown = function(event){
console.log(event);
}
</script>
</body>
</html>