第五章 事件
1. 给元素监听/绑定事件
1.1 事件的监听/绑定
// 第一种方法 把事件当做标签的属性
<button onclick="fn()"></button>
// 第二种方法, 把事件当做元素对象的方法
btnElement.onclick = fn;
// 第三种方法 事件监听方式
element.addEvenetListener('click', fn);
1.2 解除事件绑定
// 如果是第一种方式绑定 把事件当做标签属性
element.onclick = null; //覆盖
// 如果是第二种方式绑定 把事件当做元素对象方法
element.onclick = null; //覆盖
// 如果是第三种方式绑定 事件监听, 移除监听者
element.removeEventListener('click', fn);
1.3 事件监听方式的兼容性问题
//IE9+ 以及其他浏览器
addEventListener()
removeEventListener()
// IE8以及以下
attachEvent() //添加监听 事件名加on
detachEvent() //移除监听
2. 事件流
“DOM2级事件”规定的事件流包括三个阶段:
1)事件捕获阶段
2)目标阶段
3)事件冒泡阶段
首先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段,可以在这个阶段对事件做出响应。
默认,事件是在冒泡阶段触发。
addEventListener() 第三个参数是布尔值,默认是(false)表示冒泡阶段触发,如果设置为true,会在捕获阶段触发。
其他绑定事件的方式,无法设置在冒泡阶段触发还是捕获阶段触发,统一在冒泡阶段触发。
3 this 在事件回调函数中的指向
① 第一种绑定事件方式 事件当做标签属性
this 可以直接在属性值中使用,表示监听事件的元素对象。
② 第二种方式 把事件当做元素对象的方法
this 指向监听事件的元素对象。
③ 第三种方式 事件监听方式。
this 指向监听事件的的元素对象。
4 常用事件介绍
4.1 鼠标事件
事件名 | 功能介绍 |
---|---|
click | 单击 |
dblclick | 双击 |
contextmenu | 右击(菜单事件) |
mousedown | 鼠标按键按下 |
mouseup | 鼠标按键抬起 |
mousemove | 鼠标移动 |
mouseover | 鼠标进入元素 |
mouseout | 鼠标离开元素 |
mouseenter | 鼠标进入元素,用来代替 mouseover |
mouseleave | 鼠标离开元素,用来代替 mouseout |
mousewheel | 鼠标滚轮滚动,用于 chrome、safari、ie 等 |
DOMMouseScroll | 鼠标滚轮滚动,用于 Firefox,只能使用 addEventListener 监听 |
鼠标按键按下和抬起事件如何获取按的是哪个键?
事件对象.button 可以获取到鼠标按键,值如下:
0: 左键
1:滚轮键
2:右键
鼠标移动事件如何获取鼠标位置?
事件对象的属性可以获取到鼠标位置:
offsetX / offsetY 获取鼠标在目标元素上的位置
clientX / clientY 获取鼠标在视口上的位置
pageX / pageY 获取鼠标在页面上的位置
screenX / screenY 获取鼠标在屏幕上的位置
滚轮滚动事件兼容性处理:
// Chrome、Safari、Opear、IE
window.onmousewheel = wheelScrollFn;
// Firefox 浏览器
window.addEventListener('DOMMouseScroll', wheelScrollFn);
// 定义滚轮事件的回调函数
function wheelScrollFn(event) {
if (event.wheelDelta) {
// chrome、safari、ie 等
if (event.wheelDelta < 0) {
console.log('滚轮向下滚');
} else {
console.log('滚轮向上滚');
}
} else if (event.detail) {
// firefox 浏览器
if (event.detail > 0) {
console.log('滚轮向下滚');
} else {
console.log('滚轮向上滚');
}
}
}
4.2 键盘事件
事件名 | 功能介绍 |
---|---|
keydown | 键盘的按键按下 |
keyup | 键盘的按键抬起 |
keypress | 键盘的按键按下(字符按键) |
哪些元素可以监听键盘事件?
keypress 和 keydown 的区别:
keydown: 所有按键都可以触发,无法区分键盘上字母大小写
keypress: 只有可输入字符按键可以触发, 事件对象.keyCode 能够区分键入字母的大小写
如何获取按的是哪个键?
事件对象中,有属性可以获取到键盘按键的值:
keyCode:获取按键对应的ascii码
which:同 keyCode
key:获取按键的名字
4.3 文档事件
事件名 | 功能介绍 |
---|---|
load | 文档加载完毕 |
DOMContentLoaded | 文档加载完毕 |
unload | 文档关闭 |
beforeunload | 文档关闭之前 |
load 事件与 DOMContentLoaded 事件的区别:
load事件: 页面中所有的一切加载完毕,包括文档中的元素加载完毕以及外部文件下载完毕(如图片等)
DOMContentLoaded事件: 只要元素加载完毕。
4.4 表单事件
事件名 | 功能介绍 |
---|---|
submit | 表单提交的时候触发, 需要监听到 form 元素上 |
reset | 表单重置的时候触发, 需要监听到 form 元素上 |
blur | 失去焦点事件,需要监听到表单控件元素上 |
focus | 获取焦点事件,需要监听到表单控件元素上 |
select | 文本选中事件,需要监听到文本输入框或文本域元素 |
input | 输入框或文本域内容一改变就触发 |
change | 输入框文本域:内容改变且失去焦点; 单选复选下拉选项:一改变就触发 |
4.5 图片事件
事件名 | 功能介绍 |
---|---|
load | 图片加载完毕 |
error | 图片加载失败 |
abort | 图片加载中断 |
4.6 过渡事件
事件名 | 功能介绍 |
---|---|
transitionstart | 过渡开始事件,在过渡延迟之后触发 |
transitionend | 过渡结束事件 |
transitionrun | 过渡开始事件,在过渡延迟之前触发 |
4.7 动画事件
事件名 | 功能介绍 |
---|---|
animationstart | 动画开始事件 |
animationend | 动画最终结束事件 |
animationiteration | 该事件动画每重复执行一次就触发一次 |
4.8 其他事件
事件名 | 功能介绍 |
---|---|
scroll | 内容发生滚动,需要监听给给有滚动条的元素或者 window |
resize | 视口大小发生变化,需要监听给 window |
5 Event对象
在触发 DOM 上的某个事件时,会产生一个事件对象 event,这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。例如,鼠标操作导致的事件对象中,会包含鼠标位置的信息,而键盘操作导致的事件对象中,会包含与按下的键有关的信息。
5.1 Event 对象的获取
浏览器会将一个 event 对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法(DOM0 级或 DOM2 级),都会传入 event 对象。
var btn = document.getElementById("myBtn");
btn.onclick = function(event){
alert(event.type); //"click"
};
btn.addEventListener("click", function(event){
alert(event.type); //"click"
}, false);
5.2 鼠标事件对象 MouseEvent
clientX / clientY 鼠标在视口上的位置
offsetX / offsetY 鼠标在元素上的位置
pageX / pageY 鼠标在页面上(根元素上)的位置
screenX / screenY 鼠标在屏幕上的位置
button 鼠标按键键值 (0表示左键,1表示滑轮, 2表示右键)
5.3 键盘事件对象 KeyboardEvent
keyCode 键盘按键对应的ascii值
which 同keyCode
key 键盘按键的值 (返回是字符串) dom3
5.4 所有的事件对象共有的属性
type 返回事件类型(事件名)
timestamp 触发事件时的时间戳(从页面打开的那一刻开始计算)
target 获取目标元素 可以用于事件委托
stopPropagation() 阻止冒泡
preventDefault() 阻止默认行为(一些元素发生某些事件之后又默认行为)
6 事件委托
事件委托,就是把一个元素响应事件的函数委托到另一个元素。
一般来讲,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,当事件响应到目标元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上,然后在外层元素上去执行函数。
我们可以使用 event 对象中的 target 属性来判断目标元素。
//给一个一直都存在的元素绑定事件
box.onclick = function(event){
//判断 如果点击的 .item元素
if (event.target.className.indexOf('item') >= 0) {
event.target.classList.toggle('active');
}
};
事件委托的优势:
1)大量的元素监听事件,可以减少内存消耗。
2)可以动态绑定事件,给动态添加的元素也绑定事件。