事件下事件对象其实就是一个对象，这个对象中记录了很多跟当前事件相关的信息，鼠标按键信息，记录鼠标点在浏览器的哪个位置

事件对象

其实就是一个对象，这个对象中记录了很多跟当前事件相关的信息，鼠标按键信息，记录鼠标点在浏览器的哪个位置了，哪个键盘。。。

事件对象的获取方式：

1.通过一个形参来接收
2.通过window.event来接收 === event

绑定：给box对象的onclick属性赋值了一个函数

对象中如果键对应的值是一个函数的话，将这个键值对叫做对象的方法

对象的方法调用语法：对象.键() box.onclick()

当点击的时候，事件函数执行了，但是我们并没有看到这个函数调用的代码，这个调用代码应该在系统内部进行的 - 我们能不能给这个函数添加实参？不能，因为我们看不到小括号在哪里。定义函数的小括号(放形参的小括号)失去了作用了。

系统在调用事件函数的时候，给这个函数传入了一个实参 - 这个对象就叫事件对象

总结：

事件对象 - 系统在调用事件函数传入了一个实参对象，这个对象就是事件对象

事件对象的作用：记录了跟当前事件相关的很多信息

获取事件对象：

window.event
在正常的浏览器中，通过事件函数的第一个形参，也可以获取到的，在低版本ie中只能使用window.event来获取

事件类型

e.type // 事件的类型
 console.log( window.event.type );

阻止事件冒泡

事件对象.cancelBubble = true

鼠标按键信息

事件对象.button 代表当前鼠标按键信息；0-左键，1-滚轮，2-右键。

console.log( window.event.button)

键盘按键信息

事件对象.keyCode - 键盘按键码 console.log(window.event.keyCode)

每个字母和数字符号的按键码大致会遵循阿斯克码，但是每台计算机可能结果是不一样，小写就是小写的阿斯克码，小写就是大写的阿斯克码

键盘码：数字和字母他们的按键码就是阿斯克码；回车键的按键码13；空格的阿斯克码32；左上右下的按键码：37 38 39 40

组合键 - 有些键单独是没有什么作用的，通常会配合其他键才能实现功能：ctrl alt shift

事件对象中提供了几个属性用于判断是否按住了这几个组合键

ctrl - 事件对象.ctrlKey

alt - 事件对象.altKey

shift - 事件对象.shiftKey

总结：

事件对象.keyCode 代表按键码 - 数字字母对应阿斯克码(误差)
    回车：13
    空格：32
    上：38
    下：40
    右：39
    左：37
事件对象.ctrlKey - 返回布尔值，代表是否按住ctrl键
事件对象.altKey - 返回布尔值，代表是否按住alt键
事件对象.shiftKey - 返回布尔值，代表是否按住shift键

获取鼠标点击的位置

1.获取鼠标在当前事件源上点击的位置

事件对象.offsetX

事件对象.offsetY

var e = window.event;

var x1 = e.offsetX

var y1 = e.offsetY

console.log(x1, y1);

2.获取鼠标在当前浏览器区域中的位置

事件对象.clientX

事件对象.clientY

var x2 = e.clientX
ar y2 = e.clientY
console.log(x2, y2);

3.获取鼠标在当前页面中的位置

事件对象.pageX

事件对象.pageY

var x3 = e.pageX
var y3 = e.pageY
console.log(x3, y3);

总结：

鼠标位置：
相对于标签：offsetX offsetY
相对于浏览器窗口：clientX clientY
相对于整个页面：pageX pageY

阻止默认行为

默认行为：自带的功能

有些标签不需要使用js事件操作，自动就能实现某些功能，例如a标签、form、鼠标右击

1.阻止默认行为 - 事件对象.returnValue = false

var e = window.event;
e.returnValue = false

2.在事件函数的末尾，添加 return false

return false

在阻止默认行为的过程中，如果在阻止默认行为的代码之前有报错，是阻止不了的

事件委托

有的标签懒得处理事件，交给别人去处理 - 父标签

为什么父标签可以代替子标签处理事件？因为点击子标签其实也在点击父标签

子标签能不能代替父标签处理事件？不能，点击了父，不一定会触发子标签的事件

事件委托的原理是什么？事件冒泡

如何在父标签的事件中找到当前正在点击的子标签

事件对象中有一个属性 target，可以获取到当前点击的更加精准的目标元素
console.log( window.event.target.innerText );

使用事件委托的好处：

提高性能(事件委托中并没有使用循环给每个节点设置事件，只给一个父元素ul绑定事件)
后续动态添加的节点也有事件的处理

注意：事件委托底层就是通过事件冒泡来完成的，先触发父元素的事件，在通过事件对象的target属性找到具体的目标元素，进而在处理目标元素要执行的业务逻辑。

事件对象总结

名称	意义	使用方式	兼容问题
stopPropagation方法	阻止冒泡	e.propagation()	e.cancelBubble=true
preventDefault方法	阻止默认行为	e.preventDefault()	e.returnValue=false
clientX	鼠标点击坐标	e.clientX	无
offsetX	鼠标点击坐标	e.offsetX	无
pageX	鼠标点击坐标	e.pageX	无
target	精准的事件源	e.target	e.srcElement
keyCode	键盘码	e.keyCode	e.which
type	事件类型	e.type	无
button	鼠标按键信息	e.button	无

事件 下