javascript中的事件对象

一、事件对象

1、什么是事件对象

  当触发事件时，浏览器会将所有和本次事件相关的信息记录下来，放到一个对象里面，这个对象就是本次事件的事件对象。

2、如何获取事件对象

标准浏览器：本次事件处理函数的形参就是本次事件的事件对象
IE低版本：事件处理函数里面有一个预先定义好的变量window.event（简写 event），就是事件对象
兼容写法： e=e||event

二、事件的三种绑定方式

1、标签上绑定

早期的事件会自动设置一个event全局变量，用于事件的处理。
同步执行时不会丢失，异步执行会清除

 <button onclick="clickHandler()">按钮</button>
 <script>
 	function clickHandler(){
		console.lig(event);
	}
 </script>

2、DOM 0级事件

语法： 元素.on事件类型=事件处理函数
例：button.οnclick=function(e){}
清除事件: button.οnclick=null

特点：只能执行一个函数。
   有冒泡功能，没有捕获功能，大部分都会写成匿名函数。
   不支持自定义事件。

3、DOM 2级事件

标准浏览器语法：元素.addEventListener(“事件类型”,事件处理函数)
例如：button.addEventListener(‘click’,clickHandler)
清除事件：button.removeEventListener(‘click’,clickHandler)
特点：一般这种事件不写匿名函数,写命名函数,适合于函数式编程。
   这种事件包括捕获,冒泡阶段和阻止,还包括自带事件event对象。
   是否执行一次,它支持自定义事件,可以执行多个函数。
   IE8及以下不支持。

IE低版本浏览器语法：元素.attachEvent(“on事件类型”,事件处理函数)
例如：button.attachEvent(“onclick”,clickHandler)
清除事件： button.detachEvent(“onclick”,clickHandler)
特点：IE11以下支持,IE11及以上不支持；没有捕获阶段触发。

注：事件对象的兼容写法：e=e||event

三、事件基础

1、自定义事件

如果需要接收和抛发事件，必须要有对应的对象，
接收和抛发的对象必须是同一个而且必须是继承EventTarget类型的对象，
所有DOM对象都是可以抛发和接收事件的

接收和抛发对象必须一致，侦听事件类型和抛发事件类型一致，侦听必须在前，抛发必须在后。
侦听事件的回调函数中，有且只有一个参数，这个参数就是抛发的事件对象

自定义事件：
var evt=new Event("自定义事件名")
抛发事件：
对象节点.dispatchEvent(evt);

例：
var evt=new Event("chi");
evt.a=10;
document.addEventListener("chi",chiHandler);
function chiHandler(e){
	console.log(e.a);
}
document.dispatchEvent(evt);

我们也可以自己创建事件目标对象
var t=new EventTarget();
t.addEventListener("chi",chiHandler);
function chiHandler(e){
	console.log(e.a);
}
t.dispatchEvent(evt);

拓展：DOM元素的继承关系

元素节点的继承关系
HTMLDivElement--->HTMLElement--->Element--->Node--->EventTarget--->Object

根节点document的继承关系
HTMLDocument--->Document--->Node--->EventTarget--->Object

2、系统事件

查看下一篇博客 https://blog.csdn.net/m0_52634705/article/details/116017234

四、事件原理

1、事件的传播

当我们在某一个元素上触发事件的时候，会把同类型的事件向结构上的父级传播，直到window为止。

注意：

• 传播是向结构上的父级传播的
• 传播的是同类型事件
• 某一层结构父级上没有注册事件，也会传播
  • 事件行为一定会传递下来，只不过是有没有事件对应的处理函数执行而已

2、事件的目标、冒泡和捕获

• 目标：就是你准确触发事件的那个元素

  以点击事件为例，目标就是你准确点击的那个元素

  获取事件目标语法：

  • 标准浏览器：e.target
  • IE低版本：e.srcElement
  • 兼容写法：var target=e.target||e.srctarget
  • 事件处理函数中 this和e.currentTarget 表示事件侦听的目标对象

---

• 冒泡：就是从目标到window的顺序依次触发事件

  注意：如果某一层没有事件，也就是没有事件处理函数执行，会继续向上传播

---

• 捕获：就是从window到目标的顺序依次触发事件

  注意：如果某一层没有事件，也就是没有事件处理函数执行，会继续向下传播

---

注册事件冒泡或者捕获

addEventListener(事件类型，事件执行函数，是否捕获阶段触发|事件配置对象)
事件类型：事件类型必须是字符串
事件执行函数：有且仅有一个参数，不能通过事件直接传入参数内容
事件是否在捕获阶段触发：默认是flase,冒泡阶段触发
IE低版本只支持冒泡，不支持捕获

addEventListener(事件类型，事件执行函数，{once:true}); 只执行一次

抛发事件时，设置{bubbles:true}就可以让抛发的事件冒泡
例：
var evt=new MouseEvent(“click”,{bubbles:true,clientX:100,clientY:100})
div.dispatchEvent(evt);

阻止事件传播

当你不想让事件传播的时候，可以在事件处理函数中阻止
两种方式阻止事件传播
e.stopPropagation() 事件对象的方法，能够阻止传递
e.cancelBubble=true IE8以下的写法,取消冒泡

注意：
阻⽌事件传播可以阻⽌ 冒泡 和 捕获
如果要阻止冒泡，写在里层的事件处理函数里面
如果要阻止捕获，写在外层的事件处理函数里面

3、事件委托

事件委托

• 利用事件的冒泡， 把子元素的事件绑定在一个共同的父元素身上
• 事件委托能够减少事件侦听的增加，可以动态生成元素绑定时间，防止内存泄漏

注意：

• 事件委托要委托给一个共同的结构父级
• 在父级的事件处理函数里面用事件目标（e.target||e.srcElement）去判断
• 可以根据nodeName或className去判断目标元素类型

五、浏览器的默认行为

1、浏览器的默认行为

不需要我们注册事件本身就有的行为，
当我们触发一些行为时，会自动出现的情况。

例如

• 鼠标右键点击，会自动弹出菜单
• 表单的submit按钮点击，会自动提交
• 左键点击一下，然后移动鼠标会自动框选
• a标签点击自动跳转
• …

2、阻止浏览器的默认行为

当你不希望触发浏览器的默认行为的时候， 我们可以在事件处理函数里面阻止
在事件对象例有两种方式阻止浏览器的默认行为
e.preventDefault( )  标准浏览器语法
e.returnValue=false  IE低版本语法

兼容写法：

e.preventDefault?e.preventDefault():e.returnValue=false

注意：

要在同类型的事件里面去阻止默认行为

• contextmenu 鼠标右键单击事件，这里阻止弹出默认菜单
• submit 是表单提交事件，这里阻止表单自动提交行为
• reset 是表单重置事件，这里阻止表单重置
• selectstart 是你要开始框选文本，这里阻止文本框选行为
• …

六、事件对象中常用的属性和方法总结

1、判断鼠标按键-鼠标事件

	左键	中键	右键
e.button	0	1	2
e.which	1	2	3

2、光标的坐标点-鼠标事件

• clientX,clientY 光标在浏览器窗口中的坐标（兼容性最好）
• pageX,pageY 光标在整个页面中的坐标
• offsetX,offsetY 光标在被点击的元素（e.target）里面的坐标
• layerX,layerY 如果目标元素e.target定位了，和offset相同，如果没有定位，则是相对父元素左上角的坐标
• movementX,movementY 用于mousemove事件，相对于上次移动的距离
• screenX,screenY 绝对于屏幕左上角的位置

注意：光标坐标点只要是鼠标事件都能获取到

3、获取键盘按键的编码-键盘事件

• e.keyCode
• e.which
• 兼容写法 var code=e.keyCode||e.which

注意：键盘编码只有键盘事件才能获取到。
keydown事件只能获取大写字母的编码，keypress事件能获取到每个能键入的按键的编码（不能获取特殊键）

4、判断是否按下修改键-键盘事件

有时我们需要通过键盘上的某些键来配合⿏标来触发⼀些特殊的事件。这些键为： Shfit、
Ctrl、Alt 和 Meta(Windows 中就是 Windows 键，苹果机中是 command 键)，它们经常被⽤ 来修
改⿏标事件和⾏为，所以叫修改键。

属性	说明
shiftKey	判断是否按下了shift键
ctrlKey	判断是否按下了ctrl键
altKey	判断是否按下了alt键
metaKey	判断是否按下了windows键,IE不支持

5、聚焦、失焦事件

e.relatedTarget 表示上一个或者下一个目标对象，失焦就是下一个聚焦对象，聚焦就是上一个失焦对象。