|
DOM事件：
? ? ? ? javascript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生
的一些特定的交互瞬间。
事件三要素：
1. 事件目标（event target）
发生的事件与之相关联或与之相关的对象
2. 事件处理程序（event handler）
处理或相应事件的函数
3. 事件对象（event object）
与特定事件相关且包含有关该事件详细信息的对象
??
事件流（页面接收事件的顺序）
? ? 1. 事件冒泡
? ? ? 特点：从内往外传递
? ? ? ? ? 事件由一个具体的元素接收，然后又逐步传递到不具体的节点
? ? ? 注意：元素需要嵌套，每层元素都绑定事件
? ? ? 阻止事件冒泡
? ? 2. 事件捕获
? ? ? 特点：从外往内传递
? ? ? ? 事件由不太具体的节点接收到，然后传递到具体的节点上
? ? ? addEventListener()
? ? ? ? 作用：绑定事件监听器
? ? ? ? 参数：
? ? ? ? ? 1. 事件类型（click mouseover 等）
? ? ? ? ? 2. 事件处理函数 当绑定的事件被触发时 要执行的操作
? ? ? ? ? 3. boolean？ 用来决定事件流类型 事件冒泡false ?事件捕获true?
? ? ? removeEventListener()
? ? ? ? 作用：移除事件
? ? ? ? 参数：
? ? ? ? ? 1. 事件名
? ? ? ? ? 2. 事件处理函数?
? ? ? ? ? 3. boolean？ 事件冒泡false ?事件捕获true?
? ? ? onXXXXX
? ? ? ? 属性
? ? ? ? 作用：绑定事件
? ? ? ? 比如：onclick onmouseover
? ? ? ? 调用者：节点 可以是div 也可以是button
? ? ? IE事件处理程序
? ? ? ? attachEvent()
? ? ? ? ? 作用：事件绑定
? ? ? ? ? 参数： 事件处理程序名称
? ? ? ? ? ? ? ? 事件处理函数
? ? ? ? detachEvent()
? ? ? ? ? 作用：事件移除
??
事件对象 event
? ? 在触发DOM的某个事件时 会产生一个事件对象 event?
? ? 这个包含所有与事件相关的信息
? ? 浏览器默认会把event传入到事件处理函数中
? ? event对象的属性都是只读属性
? ? 属性 ? ? ? ? ?类型 ? ? ? ? ?说明
? ? type ? ? ? ?String ? ? ? ?事件类型
? ? bubbles ? ? Boolean ? ? ? 事件是否冒泡
? ? cancelable ?Boolean ? ? ? 是否可取消事件默认行为
? ? target ? ? ?Element ? ? ? 事件目标
??
事件类型?
? ? 鼠标事件
? ? ? click ? ? 点击鼠标的主按钮 ?点击触控板
? ? ? dblclick ?双击鼠标的主要按钮
? ? ? mousedowm 任意鼠标按钮按下时触发
? ? ? mouseup ? 任意鼠标按钮抬起（释放）时触发
? ? ? mousemove 鼠标在元素内部移动时会重复触发
? ? ? mousewheel ?滚轮事件
? ? ? mouseover
? ? ? mouseenter
? ? ? mouseout
? ? ? mouseleave?
? ? 焦点事件
? ? ? blur 元素失去焦点
? ? ? focus 元素获得焦点
? ? UI事件
? ? ? load
? ? ? ? 在页面完全加载后会在window上触发这个事件
? ? ? ? 如果是图像加载完成后 会在img元素上触发
? ? ? ? window.onload
? ? ? unload
? ? ? ? 在页面完全卸载后会在window上触发这个事件
? ? ? select
? ? ? ? 当用户选择文本框中的字符时会触发
? ? ? resize
? ? ? ? 当浏览器窗口被调整宽高时会触发 会重复触发
? ? ? scroll
? ? ? ? 滚动条滚动时会触发 会重复触发
? ? 键盘事件
? ? ? keydown 按下键盘任意键触发 如果按住不放会重复触发
? ? ? keypress 按下键盘字符键触发
? ? ? keyup ? 释放按键时触发
|