一, 事件流
JavaScript 与 html 之间的交互是通过事件实现的. 事件是文档或浏览器窗口中发生的一些特定交互瞬间. 可以使用处理程序来预订事件, 以便事件发生时执行相应的代码. 事件流描述的是从页面中接受事件的顺序.
1. 事件冒泡
IE 的事件流叫事件冒泡, 即事件开始时由最具体的节点接受, 然后逐级向上传播到较为不具体的节点.
2. 事件捕获
事件捕获的思想是不太具体的节点更早接受到事件, 而最具体的节点最后接受到事件. 事件捕获的用意是在事件达到目标元素之前捕获它.
3.DOM 事件流
DOM 事件流包括三个阶段: 事件捕获阶段, 处于目标阶段, 事件冒泡阶段. 首先发生的是事件捕获, 为截获事件提供了机会, 然后是实际的目标接受到事件, 最后是事件冒泡, 在这个阶段对事件作出响应.
二, 事件处理程序
响应事件的函数就叫事件处理程序(或叫侦听器).
1.HTML 事件处理程序
每个元素支持的每种事件, 都可以使用一个与相应事件处理程序同名的 HTML 特性来指定, 这个特性的值应该是能够执行的 JavaScript 代码.
<input type="button" onclick='alert("clicked")'>
2.JavaScript 指定事件处理程序
(1)使用事件处理程序属性
获取一个元素, 将一个函数赋值给该元素的事件处理程序属性, 函数中 this 引用当前元素. 删除指定的事件程序, 只需将事件处理程序属性的值设为 null.
- var btn = document.getElementById('myBtn');
- btn.onclick = function () {
- alert(this.id);//'myBtn'
- }
- // 删除事件处理程序
- btn.onclick = null;
(2)addEventListenter() 和 removeEventListenter()
addEventListenter() 和 removeEventListenter() 方法用于指定和删除事件处理程序, 所有 DOM 节点都有这两个方法, 并且它们都接受三个参数: 要处理的事件名, 作为事件处理程序的函数, 一个布尔值. 最后的参数布尔值如果为 true, 表示在捕获阶段调用事件处理程序, 为 false 表示在冒泡阶段调用事件处理程序.
- var btn = document.getElementById('myBtn');
- btn.addEventListenter('click',function(){
- alert(this.id);//'myBtn'
- },false);
- btn.addEventListenter('click',function(){
- alert('hello');
- },false);
注:
a. 这里添加的事件也是依附元素的作用域中运行, this 引用当前元素. 可以为元素添加两个事件处理程序, 会按照添加的顺序先后触发.
b. 通过 addEventListenter() 添加的事件只能通过 removeEventListenter()来移除, 移除时传入的参数与添加处理程序时相同, 这意味着通过 addEventListenter() 添加的匿名函数将无法移除.
三, 事件对象
在触发 DOM 上的某个事件时, 会产生一个事件对象 event, 这个对象中包含了所有与事件相关的信, 兼容 DOM 的浏览器, 会将事件对象 event 传入到事件处理程序中.
- btn.addEventListenter('click',function(event){
- alert(event.type);//'click'
- },false);
事件对象包含的属性方法
event 对象包含与创建它的特定事件有关的属性和方法, 触发的事件类型不同, 可用的属性和方法也不同. 但是所有事件都会有一下属性和方法:
属性 / 方法 | 类型 | 读 / 写 | 说明 |
---|---|---|---|
target | Element | 只读 | 事件的目标 |
currentTarget | Element | 只读 | 其事件处理程序当前正在处理的那个元素 |
bubbles | Boolean | 只读 | 表示事件是否冒泡 |
cancelable | Boolean | 只读 | 表示是否可以取消事件的默认行为 |
defaultPrevented | Boolean | 只读 | 为 true 表示已经调用了 preventDefault()方法 |
detail | Integer | 只读 | 与事件相关的事件信息 |
eventPhase | Integer | 只读 | 调用事件处理程序的阶段:1 表示捕获阶段,2 表示处于目标阶段,3 表示冒泡阶段 |
preventDefault() | Function | 只读 | 取消事件的默认行为,如果 cancelable 为 true,则可以使用这个方法 |
stopPropagation() | Function | 只读 | 取消事件的进一步捕获或冒泡,如果 bubbles 为 true,则可以使用这个方法 |
trusted | Boolean | 只读 | 为 true 表示事件是浏览器生成的 ,false 则为开发人员通过 js 创建的 |
type | String | 只读 | 被触发的事件的类型 |
注:
a. 在事件处理程序的内部, 对象 this 始终等于 currentTarget 的值, 而 target 则只包含事件的实际目标. 如果直接将事件处理程序指定给了目标元素, 则 this,currentTarget,target 包含相同的值. 如果事件处理程序存在于父节点中, 这些值不相等.
- document.getElementById('myBtn').onclick=function(event){
- alert(event.currentTarget === this);//true
- alert(event.target === this);//true
- }
- document.body.onclick=function(){
- alert(event.currentTarget === document.body);//true
- alert(this === document.body);//true
- alert(event.target === document.getElementById('myBtn'));//true
- }
b. 只有事件处理程序执行期间, event 对象才会存在; 一旦事件处理程序执行完毕, event 对象就会被销毁.
四, 事件类型
1.UI 事件
(1)load:
a. 当页面完全加载后在 window 上触发
b. 当所有框架都加载完毕后在框架集 frames 上触发
c. 当图像加载完毕时在 img 元素上触发
(2)unload:
a. 当页面完全卸载后在 window 上面触发
b. 当所有框架都卸载后在框架集上触发
(3)error:
a. 当发生 JavaScript 错误时在 window 上出触发
b. 当无法加载图像时在 img 元素上触发
(4)select: 当用户选择文本框 (input/textarea) 中的一个或多个字符时触发
(5)resize: 当窗口或框架的大小改变时在 window 或框架上触发
(6)scroll: 当用户滚动带滚动条的元素时, 在该元素上触发
2. 焦点事件
(1)blur: 在元素失去焦点时触发, 这个事件不会冒泡
(2)focus: 在元素获取焦点时触发, 这个事件不会冒泡
3. 鼠标事件
(1)click: 单击鼠标左键时触发
(2)dbclick: 双击鼠标左键时触发
(3)mousedown: 按下鼠标任意按钮时触发
(4)mouseenter: 鼠标光标从元素外部移入元素内时触发
(5)mouseleave: 鼠标光标从元素内部移动到元素外时触发
(6)mousemove: 鼠标光标在元素内部移动时重复触发
(7)mouseout: 鼠标光标在元素上方, 移入另一个元素时触发, 另一个元素可以是兄弟元素或子元素
(8)mouseover: 鼠标光标从元素外部移入元素内时触发
(9)mouseup: 释放鼠标按钮时触发
注: 只有在同一个元素上相继触发 mousedown 和 mouseup 事件, 才会触发 click 事件; 如果 mousedown 和 mouseup 中的一个被取消, 就不会触发 click 事件.
4. 事件的位置信息
(1)客户区坐标位置
event.clientX 和 event.clientY 表示事件发生时鼠标指针在视口中的水平和垂直坐标.
(2)页面坐标位置
event.pageX 和 event.pageY 表示事件发生时鼠标指针在页面中的水平和垂直坐标.
在页面没有滚动的情况下, event.clientX 和 event.clientY 的值与 event.pageX 和 event.pageY 的值相等.
(3)屏幕坐标位置
event.screenX 和 event.screenY 表示事件发生时鼠标指针在整个电脑屏幕中的水平和垂直坐标.
5. 修改键
键盘上的 Shift,Ctrl,Alt,Meta(在 Windows 键盘中就是 Windows 键, 在苹果机中就是 Cmd 键), 它们经常被用来修改鼠标事件的行为. DOM 为此规定了 4 个属性, 表示修改键的状态: shiftKey,ctrlKey,altKey 和 metaKey. 这些属性的值都是布尔值, 相应键被按下则值为 true, 否则为 false.
6. 鼠标按钮
当鼠标被按下或释放时, event 对象包含 button 属性, 表示被按下或释放的是鼠标按键. DOM 的 button 属性有三个值: 0 表示鼠标左键, 1 表示中间的滚轮按钮, 2 表示鼠标右键
7. 鼠标滚轮事件
当用户通过鼠标滚轮与页面交互, 在垂直方向上滚动页面时, 就会触发 mousewheel 事件, 这个事件可以在任何元素上触发, 最终都会冒泡到 document 或 window 上. 该事件对应的 event 对象上包含一个特殊的属性 wheelDelta , 当用户向前滚动鼠标滚轮时, wheelDelta 是 120 的倍数, 当向后滚动滚轮时 wheelDelta 是 - 120 的倍数.
- window.addEventListener('DOMMouseScroll',function(e){
- console.log(e.detail);// 向前 - 3, 向后 3
- });
- window.addEventListener('mousewheel',function(e){
- console.log(e.wheelDelta);// 向前 120, 向后 - 120
- });
8. 键盘事件
(1)keydown: 按下键盘上任意键时触发, 若按住不放则重复触发
(2)keypress: 按下字符键时触发, 若按住不放则重复触发
(3)keyup: 是否键盘上的按键时触发
用户按下字符键时, 先触发 keydown, 然后是 keypress, 最后是 keyup. 若按下非字符键, 先触发 keydown, 然后是 keyup 事件.
9. 键码
发生 keydown 和 keyup 事件时, event 对象的 keyCode 属性中会包含一个代码, 与键盘上的按键对应.
常用 keyCode:
键 | 键码 |
---|---|
退格(Backspace) | 8 |
回车(Enter) | 13 |
左箭头 | 37 |
上箭头 | 38 |
右箭头 | 39 |
下箭头 | 40 |
10. textInput 事件
当用户在可编辑区域中输入字符时, 就会触发该事件.
(1)textInput 与 keypress 事件的区别:
a. 只有编辑区域才能触发 textInput 事件, 而任何可以获取焦点的元素都可以触发 keypress 事件
b. 只有用户按下能够输入实际字符的键才能触发 textInput 事件, 而 keypress 事件则在按下那些能够影响文本显示的键时也会触发(如退格键).
(2)event.data 属性
textInput 的事件对象中有一个 data 属性, 该属性的值就是用户输入的字符.
来源: http://www.qdfuns.com/article/46690/ae32a5e36bb72cb7961bca7a2294eaec.html