基础事件详解

一、什么是事件

事件就会用户操作页面引起的行为

二、添加事件的方式

1、添加事件的方式

dom0：如果同一个元素添加多个事件，那么后面的事件会覆盖前面的事件

• dom节点.on事件名=函数
• 行内事件，写在标签内的事件
• 删除事件：给事件赋值为null

dm2：同一个事件可以添加多个（addEventListener）
addEventListener：接收两个参数，第一个参数是事件的名字，第二个参数是触发事件后执行的函数
removeEventListener：dom2删除事件的方式

三、鼠标事件

• click：鼠标左键单击事件
• dblclisk：鼠标左键双击事件
• mousedown：鼠标按下事件
• mouseup：鼠标抬起事件
• mouseover：鼠标移入事件
• mouseenter：鼠标移入事件
• mouseout：鼠标移出事件
• mouseleave：鼠标移出事件

四、HTML事件

其他事件

• onload：页面加载完后触发
• onscroll：滚动页面时触发

input事件

• onchange：输入框内容改变并且失去焦点时触发
• oninput：输入框内容改变时触发
• onfocus：在页面或者元素获取焦点时触发
• onblur：在页面或者元素失去焦点时触发
• onresize：在浏览器窗口或框架发送改变时触发

五、事件对象

当触发某个事件时，会产生一个事件对象（浏览器创建的），这个事件对象包含着所有与事件有关的信息
事件对象的获取：通过绑定事件的执行函数可以得到一个隐藏参数。浏览器会自动分配一个参数，这个参数其实就是event对象

1、相对屏幕的位置

• screenX
• screenY

2、相对于窗口的位置

• clientX
• clientY

4、相对于页面的位置

• pageX
• pageY

5、相对于事件源的位置

• offsetX
• offsetY

6、元素偏移量
相对于遇见第一个有定位的父元素的偏移量，如果父元素都没有定位，则相对去窗口

• offsetLeft
• offsetTop

7、target：事件源
8、currentTarget：事件产生那一刻的事件源
9、type：事件类型
10、onmousedown ：0 左键 1 滚轮 2 右键（button属性 当前事件触发时哪个鼠标按键被点击）
11、scrollWidth：浏览器宽度
12、scrollHeight：是一个只读属性，代表元素的高度，单位是px
13、获取元素的宽高
client：获取元素的宽高（包括元素高度、内边距，不包括边框和外边距）

• clientHeight
• clientWidth

offset：获取元素的宽高（包括元素高度、内边距和边框，不包括外边距）

• offsetHeight
• offsetWidth

六、键盘事件

• keydown：按下任意键盘时触发，一直按着不放会一直执行
• keyup：键盘抬起时触发
• keypress：键盘按下触发

七、键盘事件对象

• keycode：键码
• altKey：Ait键，返回布尔值
• shiftKey：shift键，返回布尔
• ctrlKey：ctrl键，返回布尔

八、剪切板事件

• oncopy：复制文本时触发
• navigator.clipboard.readText：复制的文本，返回的是一个Promsie对象

九、事件流

完整的事件流是先发送捕获在发生冒泡
事件冒泡：指事件传播过程，从内到外传递的过程（stopPropagation()：阻止冒泡。preventDefault()：阻止标签的默认行为）
捕获：dom2中添加监听事件，可以传入第三个参数。第三个是布尔值，true是监听捕获阶段，false是不监听捕获阶段