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 键盘按键抬起触发