DOM——事件详解
Posted superjishere
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM——事件详解相关的知识,希望对你有一定的参考价值。
事件
事件:触发-响应机制
事件三要素
-
事件源:触发(被)事件的元素
-
事件名称: click 点击事件
-
事件处理程序:事件触发后要执行的代码(函数形式)
事件的基本使用
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() 取消默认行为
案例
-
跟着鼠标飞的天使
-
鼠标点哪图片飞到哪里
-
获取鼠标在div内的坐标
阻止事件传播的方式
-
标准方式 event.stopPropagation();
-
IE低版本 event.cancelBubble = true; 标准中已废弃
常用的鼠标和键盘事件
-
onmouseup 鼠标按键放开时触发
-
onmousedown 鼠标按键按下触发
-
onmousemove 鼠标移动触发
-
onkeyup 键盘按键按下触发
-
onkeydown 键盘按键抬起触发
以上是关于DOM——事件详解的主要内容,如果未能解决你的问题,请参考以下文章