DOM操作4:事件
事件三要素
- 事件源:触发(被)事件的元素
- 事件类型:事件的触发方式(例如鼠标点击或键盘点击)
- 事件处理程序:事件触发后要执行的代码(函数形式)
事件的基本使用
var box = document.getElementById('box');
box.onclick = function() {
console.log('代码会在box被点击后执行');
};
事件详解
注册/移除事件的三种方式
var box = document.getElementById('box');
box.onclick = function () { // 注册
console.log('点击后执行');
};
box.onclick = null; // 移除
box.addEventListener('click', eventCode, false); // 注册
box.removeEventListener('click', eventCode, false); // 移除
box.attachEvent('onclick', eventCode); // 注册
box.detachEvent('onclick', eventCode); // 移除
function eventCode() {
console.log('点击后执行');
}
兼容代码
function addEventListener(element, type, fn) {
if (element.addEventListener) {
element.addEventListener(type, fn, false);
} else if (element.attachEvent){
element.attachEvent('on' + type,fn);
} else {
element['on'+type] = fn;
}
}
function removeEventListener(element, type, fn) {
if (element.removeEventListener) {
element.removeEventListener(type, fn, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, fn);
} else {
element['on'+type] = null;
}
}
事件的三个阶段
-
捕获阶段
-
当前目标阶段
-
冒泡阶段
事件对象
.eventPhase
属性可以查看事件触发时所处的阶段
事件对象的属性和方法
event.type
获取事件类型clientX/clientY
所有浏览器都支持,窗口位置pageX/pageY
IE8以前不支持,页面位置event.target || event.srcElement
用于获取触发事件的元素event.preventDefault()
取消默认行为
阻止事件传播的方式
- 标准方式
event.stopPropagation();
- IE低版本
event.cancelBubble = true;
标准中已废弃
常用的鼠标和键盘事件
onmouseup
鼠标按键放开时触发onmousedown
鼠标按键按下触发onmousemove
鼠标移动触发onkeyup
键盘按键按下触发onkeydown
键盘按键抬起触发