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;   } }

事件的三个阶段

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

   事件对象.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 键盘按键抬起触发

原文地址：https://www.cnblogs.com/superjishere/p/11745679.html