概念
- 事件流:描述从页面中接收事件的顺序
- 事件流的三个阶段:捕获、处于目标对象、冒泡
- 事件:用户或浏览器自身执行的某种动作
- 事件处理函数:响应某个事件的函数,以on开头
- 事件名:click
事件处理函数名:onclick- 定义事件处理程序(即事件的响应函数):
- 在html中定义
- js中定义-DOM0:ele.οnclick=fn
移除事件:ele.onclick = null- js中定义-DOM2:ele.addEventListener(‘click’,fn,{})
- 事件对象(event):所有与事件有关的,从浏览器传导事件处理程序函数中
- target、currentTarget
- target:点击的元素
- currentTarget:注册事件的元素
- 事件委托:
- 把事件绑定在父元素等高层级元素上,或绑定在document上,利用事件冒泡机制,可以解决事件处理程序过多问题。
- 从文档中移除带有事件处理程序的元素时,这些事件处理程序可能无法被当做垃圾回收,所以要先清除这些事件处理程序btn.onclick = null或btn.removeListenerListener('click)
- DOM2事件
- addEventListener()和removeEventListener()的参数必须相同
- 可以给一个元素指定多个相同事件,按顺序执行,不会被覆盖
- 可以设置在冒泡(false默认)还是捕获(true)时触发函数
- 事件类型
- UI
- 焦点
- 鼠标及滚轮
- 键盘及文本
- 触摸及手势
- HTML5事件
- 复合
- 设备
- 变动
各类事件
- UI事件:
- load:
- 当页面完全加载完在window上面触发
- 当图片或视频加载完在<img>或<video>上面触发
- 当资源如<link>、<script>加载完在这些标签上触发
- 当框架加载完在框架上触发
- unload:
- 当页面完全卸载完在window上面触发
- 当框架卸载完在框架上触发
- resize:
- 当窗口大小发生变化时,在window上触发
- 当框架大小发生变化时,在框架上触发
- scroll:
- 当用户滚动带滚动条的元素,在该元素上触发
- 当用户滚动页面滚动条时,在<body>上触发
- select:
- 当用户选择文本框(<input>、<textarea>)中的一个或者多个字符时触发
- error:
- 当发生js错误时在window上面触发
- 当图片或视频无法加载时在<img>或<video>