JS-----DOM事件

文档或浏览器窗口 发生的一些特定的交互瞬间 能够监听事件 来实现事件发生时执行特定的操做

1. 鼠标事件 鼠标动时触发的事件

• 元素.onclick = function{} 单机事件
• 元素.ondbclick = function(){} 双击事件
• 元素.onmouseenter = function(){} 鼠标移入
• 元素.onmouseleave = function(){}鼠标移出
• 元素.onmouseover = function(){} 鼠标滑过
• 元素.onmouseout = function () {} 鼠标划出
• 元素.onmousemove = function () {} 鼠标移动
• 元素.onmousedown = function () {} 鼠标按下
• 元素.onmmouseup = function () {} 鼠标抬起
• 元素.onmousewheel = function () {} 鼠标滚轮滚动

2. 键盘事件 input、textarea、document.body、document、window、document.documentElement 监听键盘事件

• 元素.onkeydown = function() {} 键盘按下
• 元素.onkeyup = function () {} 键盘抬起

3. 表单元素事件

• onfocus 获取焦点（光标）事件
• onblur 失去焦点时触发
• onchange 事件，表单的值（value）发生改变时触发
• oninput input、textarea 等元素的输入事件

4. 系统事件

• window.onload 页面中全部的资源所有加载完触发
• window.onresize 当前窗口尺寸发生改变时触发
• window.onsroll 滚动条滚动时触发

5. 移动端事件

• ontouchstart 触摸元素时触发
• ontouchend 离开元素时触发
• ontouchmove 滑动时触发
• 移动端使用 click 大概有 300ms 的延迟

事件对象

在事件触发时 浏览器传递给事件函数的实参 其中包含了本次事件触发的具体信息

• e.clientX 鼠标点击的位置相对于当前浏览器可视窗口的 左偏移值
• e.clientY 鼠标点击位置相对于当前浏览器可视窗口的 上偏移值
• e.pageX 鼠标点击位置相对于 body 左边缘的偏移值
• e.pageY 鼠标点击位置相对于 body 上边缘的偏移值
• e.target 触发事件的元素（点击事件中是点击的元素）对象，称为事件源
• IE 事件触发时把事件信息挂载在 window.event 这个属性上
• e.keyCode 键码：键盘上每一个键对应一个键码，当 keydown 事件触发时

默认事件 和 默认行为

• e.preventDefault(); 阻止元素的事件默认行为
• IE 低版本：e.returnValue = false
• return false; return false 也能够阻止默认行为

事件触发过程

• 捕获阶段 事件触发时，浏览器先从最外层的元素开始找，一直找到事件源的过程称为捕获阶段
• 目标阶段
• 冒泡事件 触发事件源绑定事件后开始向上冒泡，依次触发父级元素的该事件
• 元素.onXXX = func... 绑定的事件都是 DOM0 级事件，DOM0 级事件都是绑定在冒泡阶段的
• 取消冒泡 e.stopPropagation()
  • IE低版本下 e.cancelBubble = true;
  • 取消冒泡后，事件不会再向上传播；更高层级的元素的对应事件不会触发
  • over 属于划过事件，从父元素进入子元素，属于离开了父元素
  • enter 属于进入，从父元素进入子元素，不算离开父元素，不会触发父元素的 leave 事件 父子嵌套的这种状况，使用 over 会触发不少不可控的状况，使用 enter 更加简单

onload 和 DOMContentLoaded

• a.onload事件 加载成功后执行
• window.onload 当页面中全部资源所有加载完成后再执行
• a. DOMContentLoaded 只要页面中的DOM结构加载完成后就触发
• JS是用来操做DOM的 通常须要在DOM加载完成以后再执行JS

事件委托

• 把事件绑定给父级元素或者更高级元素，而后根据e.target事件源做出不一样操做
• 利用事件的冒泡传播机制，给里面的每一个子元素绑定相同的事件行为，把事件绑定给他们共同的上级元素，而后利用e.target区分具体触发事件的元素，而后作不一样的操做