DOM事件对象

事件对象

什么是事件对象？

1.event就是一个事件对象 写到我们侦听函数的小括号里面，可以当形参来看2.事件对象只有有了事件才会存在,它是系统给我们自动创建的，不需要我们传递参数3.事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信 息：鼠标坐标之类的。如果是键盘事件里面就包含了键盘的事件信息，比如判断用户按下了哪个键4.这个事件对象我们可以自己命名，一般是event、evt或者更简单的e5.事件对象也有兼容性问题 ie678只能通过window.event 那么兼容性写法是 e = e || window.event一般不太考虑兼容性问题了，实际开发直接写event就好了例如:

 //事件对象var div = document.querySelector('div');div.onclick = function (event) {console.log(event);console.log(window.event); //ie678的用这句event = event || window.event; //兼容性写法console.log(event);} //以前我们注册完事件后绑定事件的function中的()是没有参数的，其实里面可以有一个参数eventdiv.addEventListener('click', function (e) {console.log(e);}) 

**总结：**事件对象是写在函数小括号里面当形参来看的，它是与事件相关的，必须有了事件才会有事件对象。官方解释：event对象代表事件的状态，比如键盘按键状态、鼠标的位置、鼠标按钮的状态。简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。

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

e.target返回触发事件对象

e.target返回的是触发事件的对象(元素) 、this返回的是绑定事件的对象(元素)

 var div = document.querySelector('div');var ul = document.querySelector('ul');div.addEventListener('click', function (e) {console.log(e.target);// <div></div>console.log(this);// <div></div>})ul.addEventListener('click', function (e) {console.log(this); //因为是ul绑定的事件，所以this返回的是ulconsole.log(e.target); //触发的对象是li，返回的是liconsole.log(e.currentTarget); //与this相似}) 

 div.onclick = function (e) { e = e || window.event; var target = e.target || e.srcElement; console.log(target); } 

还有一个与this非常相似的属性 currentTarget，也是返回触发事件的对象,了解即可 同样也有兼容性问题，ie678不认识。

e.type返回事件类型

 var div = document.querySelector('div');div.addEventListener('click', fn);div.addEventListener('mouseover', fn);div.addEventListener('mouseout', fn);function fn(e) {console.log(e.type);} 

e.preventDefault()阻止对象默认行为

比如阻止链接跳转，阻止提交到表单

 var a = document.querySelector('a');// (1)方法监听注册方式a.addEventListener('click', function (e) {e.preventDefault(); //该方法阻止默认事件(行为) 是标准方法})// (2)传统的注册方式a.onclick = function (e) {return false; alert('1');} 

e.preventDefault() 适用于普通浏览器阻止默认行为的标准方法。e.returnValue适用于低版本 ie678 阻止默认行为的属性。或者直接使用return false 也能阻止默认行为， 没有兼容性问题。如上面代码，return false虽然不错，但是return后面如果有代码就执行不了啦.并且return false阻止默认行为只适用于传统的注册方式。

常见的鼠标事件

1.禁止鼠标右键菜单contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

 document.addEventListener('contextmenu', function (e) {//再利用事件对象阻止默认行为e.preventDefault();}); 

2.禁止鼠标选中(selectstart 开始选中)

 document.addEventListener('selectstart', function (e) {//再利用事件对象阻止默认行为e.preventDefault();}); 

以及其他的 点击事件click、双击事件dbclick、鼠标按下mousedown、鼠标抬起mouseup、鼠标移动mousemove、滚轮滑动wheel、鼠标移入移出mouseenter/mouseleave、鼠标经过离开mouseover/mouseout等

mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。

鼠标事件对象

如果你的事件是鼠标触发的，那么你的事件对象也是鼠标事件对象可以试着在触发的事件处理函数中输出 事件对象，查看自带的属性

鼠标事件对象常见的属性：e.clientX : 返回鼠标相对于浏览器窗口可视区的X坐标e.clientY : 返回鼠标相对于浏览器窗口可视区的Y坐标e.pageX : 返回鼠标相对于文档页面的X坐标，IE9以上支持e.pageY : 返回鼠标相对于文档页面的Y坐标，IE9以上支持e.screenX : 返回鼠标相对于电脑屏幕的X坐标e.screenY : 返回鼠标相对于电脑屏幕的Y坐标

示例

 document.addEventListener('click', function (e) {// console.log(e); //得到MouseEvent 里面很多属性// 1.client 鼠标在浏览器可视区的坐标console.log(e.clientX);console.log(e.clientY); //不管你的body高是几千px也好，我都是相对于我当前浏览器可是窗口来返回坐标的// 2.鼠标在文档的坐标console.log(e.pageX);console.log(e.pageY);// 3.鼠标距离屏幕的坐标console.log(e.screenX);console.log(e.screenY);}) 

常见的键盘事件

常用的键盘事件onkeyup : 某个键盘按键被松开时触发onkeydown : 某个键盘按键被按下时触发onkeypress : 某个键盘按键被按下时触发(但是它不识别功能键，比如ctrl和shift箭头等等)

 // 1.onkeyup键盘弹起时触发document.onkeyup = function () { //传统方式注册console.log('我弹起了！--onkeyup');} // 2.onkeydown键盘按下触发document.onkeydown = function () { //传统方式注册console.log('我按下了！--onkeydown');}// 3.onkeypress 按下时触发document.onkeypress = function () { //传统方式注册console.log('我按下了！--onkeypress'); //onkeypress不识别功能键} 

**注意：**三个事件的执行顺序，先是keydown 然后是keypress 最后是keyup

键盘事件对象

同理，如果事件是由键盘触发的，那么事件对象就是键盘事件对象介绍一些常用的键盘事件对象中的keyCode属性可以得到相应键的ASCII码值注意：

1.keyup 和 keydown事件不区分字母大小写 a 和 A都是65
2.keypress事件不区分字母大小写 a 和 A得到的都是65e.KeyCode

 document.addEventListener('keyup', function (e) {// console.log(e); //输出KeyboardEvent，里面有很多属性console.log('up' + e.keyCode);//可以利用KeyCode返回的ASCII码值来判断用户 比如if (e.keyCode === 65) {alert('您按下了a');} else {alert('您没有按下a');}})document.addEventListener('keypress', function (e) {console.log('press' + e.keyCode);}) 

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享