第十三章 javascript事件系统

一、事件的组成

1. 事件系统是js最大的特色功能之一。事件，也叫行为，表示用户和浏览器或文档的交互。
2. 从语法上来看一个完整的可被触发的事件，须由以下几部分组成：
   • 事件源：绑定事件的元素，在事件处理函数内，可通过this获取
   • 绑定事件的方式：
     • 赋值式：on+事件类型，配合赋值运算符：btn.onclick = function(){}
     • 监听式：通过专属方法：btn.addEventListener("click", function(){})
   • 事件类型：行为方式，如何触发事件
   • 事件处理函数：发生对应行为时要执行的函数

二、事件绑定

2.1 赋值式（DOM0级）

1. 绑定语法：事件源.on事件类型 = 事件处理函数
   • btn.onclick = function(){}
   • 特点：
     • 重复绑定会覆盖，只能绑定一个事件处理函数
     • 无兼容
     • 无法触发事件捕获阶段
2. 解绑语法：事件源.on事件类型 = null
   • btn.onclick = null
   • 利用了重复赋值会覆盖的特性

2.2 监听式（DOM2级）

1. 绑定语法：事件源.addEventListener("事件类型", 事件处理函数, 布尔值)
   • btn.addEventListener("click", fn, false)
   • 特点：
     • 可以重复绑定，能绑定多个事件处理函数
     • 有兼容，IE低版本浏览器不支持
     • 可以指定事件流的状态
       • 参数3为布尔值：true捕获，false冒泡
2. 解绑语法：事件源.removeEventListener("事件类型", 事件处理函数, 布尔值)
   • btn.removeEventListener("click", fn, false)
   • 注意：删除时，要指定绑定时的同一个事件处理函数，建议通过函数名获取
3. IE低版本浏览器：
   • 绑定：元素.attachEvent("on事件类型", 事件处理函数)
   • 解绑：元素.detachEvent("on事件类型", 要删除的事件处理函数)
4. 兼容封装

// 绑定
function addEvent(ele, type, cb){
    
    
  if(ele.attachEvent){
    
    
    ele.attachEvent("on"+type, cb);
  }else{
    
    
    ele.addEventListener(type, cb);
  }
}
// 解绑
function removeEvent(ele, type, cb){
    
    
  if(ele.detachEvent){
    
    
    ele.detachEvent("on"+type, cb);
  }else{
    
    
    ele.removeEventListener(type, cb);
  }
}

三、事件类型

1. 鼠标类
   • 滚轮事件：wheel
2. 键盘类
3. 表单类
4. 浏览器类
5. 图片类
6. 移动端
   • touchstart：触摸开始事件
   • touchend：触摸结束事件
   • touchmove：触摸移动事件

四、事件对象

1. 事件对象：是在发生事件时由浏览器自动创建的JavaScript对象，它包含有关该事件的所有信息。
   • 例如触发事件的元素、事件类型、鼠标位置等。
2. 获取事件对象：
   • 正常浏览器：通过事件处理函数的参数获取。
     • 在事件处理函数中，浏览器自动将事件对象作为第一个参数传递给函数

document.addEventListener('click', function(event) {
    
    
  // 处理点击事件
  console.log(event);
});

• IE低版本浏览器：通过window对象的event属性获取。
  • 在事件处理函数中，浏览器会在事件发生的一瞬间，给window绑定一个event属性，事件结束后，会立即从window身上删除event

document.addEventListener('click', function() {
    
    
  // 处理点击事件
  console.log(window.event);
});

• 兼容处理：利用参数未传递时，为undefined的特点

document.addEventListener('click', function(event) {
    
    
  // 处理点击事件
  var e = event || window.event;
  console.log(e);
});

3. 事件对象的特点
   • 事件对象只在事件发生时存在，在事件处理函数执行完毕后被销毁。
   • 事件对象的属性和方法可以用来获取事件的类型、目标元素、鼠标位置等信息，或者取消默认行为、阻止事件冒泡等操作。
   • 不同类型的事件对象具有不同的属性和方法。
     • 例如，鼠标事件对象有clientX和clientY属性，键盘事件对象有keyCode属性，等等。
4. 鼠标事件对象的常用属性
   • clientX和clientY：鼠标相对于浏览器窗口可视区域左上角的水平和垂直坐标。
   • screenX和screenY：鼠标相对于屏幕左上角的水平和垂直坐标。
   • pageX和pageY：鼠标相对于文档左上角的水平和垂直坐标。
   • offsetX和offsetY：鼠标指针相对于事件目标左上角的水平和垂直坐标。
   • target：事件目标，触发事件的DOM元素。
   • button：表示按下了哪个鼠标键，左键为0，中键为1，右键为2。
   • type：事件类型，例如click、mousedown、mouseup等。
5. 键盘事件对象的常用属性
   • keyCode：表示当前按下或释放的键的键码，有兼容，兼容属性为：which
   • altKey、ctrlKey、shiftKey、metaKey：分别表示是否按下了Alt、Ctrl、Shift、系统键。
     • 用来做组合键，值为布尔
     • win:ctrl, MAC:control
     • win:shift, MAC:shift
     • win:alt, MAC:option
     • win:win, MAC:command
   • type：事件类型，例如keydown、keyup等。

五、事件流

1. 产生事件流的原因：当多个嵌套元素，添加相同事件时
2. 事件流状态
   • 事件捕获：从最外层元素依次向内触发相同事件，直到目标元素
     • 借助事件监听式绑定事件方法触发
   • 目标阶段：目标元素的当前事件
   • 事件冒泡：从目标元素依次向外触发相同事件，直到根节点
     • 默认的事件流阶段，IE浏览器中只支持事件冒泡
3. 阻止事件冒泡
   • 正常：e.stopPropagation()
   • IE低版本：e.cancelBubble = true
4. 触发事件捕获
   • 必须要通过addEventListener触发
     • 元素.addEventListener(“事件类型”, 事件处理函数, 布尔值)
       • 布尔值：true表示捕获阶段，false表示冒泡阶段
       • btn.addEventListener("click", fn, true)

六、默认事件

1. 默认事件：没有主动添加，浏览器或页面自带的功能或行为，叫默认事件
   • 右键菜单
   • a的跳转
   • form内submit的跳转
   • 文字的选中
   • F12打开控制台
   • F5的刷新
   • ctrl+a的全选
   • ctrl+c的复制
2. 阻止默认事件
   • 借助事件对象
     • 正常：e.preventDefault();
     • IE低版本：e.returnValue = false;
   • 直接在事件处理函数的最后：return false

七、事件委托

1. 将多个子元素的相同事件，委托给页面上现存的共同的父元素，利用事件冒泡的原理，配合事件目标找到真正要触发事件的元素 的过程，叫事件委托
2. 优势
   • 节省性能
   • 给页面上暂时不存在的元素绑定事件

list.onclick = function(eve){
    
    
  var e = eve || window.event;
  var target = e.target || e.srcElement;
  if( 判断事件目标是否具有需要执行功能的元素的标志 ){
    
    
    // 真正要执行的功能
    console.log(target);
  }
}

八、练习

1. 聊天对话框-键盘控制
2. 按下键盘上的方向键，控制页面元素移动
3. 表格的即时编辑
4. 尽最大可能阻止用户复制网页上的文字
5. 实时显示鼠标在页面上的坐标
6. 一连串跟随鼠标移动的元素
7. 倒计时 - 单按钮版
8. html+css+js模拟下拉菜单
9. 一个容器，有标题，有内容，鼠标在标题上按下，可以拖拽整个容器，在内容区域按下，无法拖拽
10. 自定义事件系统，可实现自定义事件的绑定、触发、删除