JS 进阶 （六） 浏览器事件模型DOM操作（2）

JS 事件

事件是元素(或者浏览器)天生自带的行为，只要行为处罚，就会触发相关的事件

xxx.onclick = function(){} 属于事件绑定，给这个事件行为绑定方法，行为触发的时候

事件参考文档

【事件】

• 鼠标事件

• click 点击
• dbclick 双击
• mousedown/mouseup/mousemove
• mouseover/mouseout
• mouseenter/mouseleave
• wheel 滚轮

• 表单事件

• focus/blur 获取、失去焦点
• change 内容改变

• 键盘事件

• keyup/keydown
• keyepress

• 手势事件

• touchstart/touchend/toucemove 单指
• gesture 多指事件

• 拖放事件

• dragstart / drag / dragend
• dragenter 进入投放区
• dragover/dragover
• drop 释放

• 媒体事件
  
• 值变化事件

• hashchanghe 浏览器地址栏 hash 变化触发事件
• input 表单正在输入内容。。。

• 其他事件

• offline/online 断网或者连网
  
• animationstart/iteration CSS3Animation 动画事件
  
• transitionstart/end。run CSSTranslation 动画事件
  
• fullscreenchange 全凭切换事件
  
• resize 窗口大小改变
  
• scroll 滚动条滚动
  
• load 加载完
  
• error 加载失败
  
• timeout 加载超时
  
• progress 加载中
  

【事件绑定】

• 1、DOM0 级事件绑定
  元素.onxxx = function(){...}
  
• 2、DOM2 级事件绑定
  在 EventTarget.prototype 添加了 addEventListener/removeEventLister/dispatchEvent
  非标准浏览器（IE<=8）没有这个东西，只有 attachEvent/datachevent(里面 this 不是当前元素)
  xxx.addEventListener('xxx',function(){...})
  

【DOM 事件绑定原理】

每一个 DOM 元素对象内都有很多内置属性，其中包含 onxxx 这样的事件类型的私有属性

DOM0事件绑定原理就是给这些事件类私有属性赋值

特点： 如果不存在不绑定，只能绑定一个方法

DOM2 事件绑定

box.addEventListener('click',function(){})

DOM2 事件可以绑定多个，他是通过浏览器事件池机制来做的

问： window.onload 和 document.ready 区别($(document).ready())?

答： jq 中的 document.ready 的原理是使用了 DOM2 级事件绑定，通过

window.addEventlistener("DOMContentLoad", ()=>{...}) 可以在一个页面中执行多次这个方法，而且它是 DOM 加载完后执行

window.onload 是基于 DOM0 级事件绑定，只能在页面初始的时候执行一次，而且需要所有资源加载完后才执行，所以 window.addEventlistener("DOMContentLoad", ()=>{...})比 window.onload 执行的更快

事件对象和事件传播机制

• 事件对象
  当事件触发、浏览器会把制定的方法执行，并且把全局下记录的当前操作信息的'事件对象'传递给这个函数 ，不管在哪个函数中，获取到的是同一个对象，存储的是当前操作的信息，和函数没关系

let n;
document.bofy.onclick = function (ev) {
  console.log("Body");
  console.log(ev === n);
};
box.onclick = function (ev) {
  console.log("Box");
  console.log(ev);
};

事件对象

• 【鼠标事件对象】MouseEvent
  clientX/clientY: 鼠标触发点距离当前窗口左上角x/y坐标
  pageX/pageY：鼠标触发点距离当前页面Body的左上角x/y坐标
  path:[...]： 存储的是冒泡阶段传播的路径，（值是捕获阶段获得的）
  srcElement/target： 事件源，当前操作的元素，在哪触发的
  type: 事件类型
  
• 【键盘事件对象】KeyboardEvent
  which/keyCode 键盘码
  altKey/shiftKey/ctrlKey 记录是否在按键的时候按了，组合按键，属性是布尔
  
• 【常规事件对象】Event
  e.preventDefault()  / e.returnValue  阻止事件默认行为

     ```js
        // 设置点击ctrl+f 刷新
        document.onkeydown = function (ev) {
          console.log(ev);
          ev.preventDefault() || ev.returnValue;
          let { ctrlKey, keyCode } = ev;
          if (ctrlKey && keyCode === 70) {
            window.location.reload();
          }
        };
        // 禁止右键打开菜单
        document.oncontextmenu = function (ev) {
            ev.preventDefault()
            // return false
        };
     ```

• e.stopPropagation() / e.cancelBubble 阻止事件的冒泡

// 事件具备传播机制
+ 捕获阶段 CAPTURING_PHASE: 1
+ 目标  AT_TARGET: 2
+ 冒泡  BUBBLING_PHASE
1、当我们触发当前元素的事件行为的时候，首先从最外层window开始，一层层的按照结构向里层查找 —— 捕获阶段（目的是为冒泡提供传播路径）
2、找到当前的事件源，触发当前的相关行为 —— 目标阶段
3、不仅当前事件源的相关行为被触发，其所有祖先元素的相关事件行为都会被触发，（由里向外） —— 冒泡阶段
⚠️注意：DOM0级事件中只有冒泡事件，DOM2级事件中xxx.addEventListener('click',function(){}, false) , 第三个参数是可以控制在冒泡还是捕获阶段触发，默认false，冒泡，改成true为捕获阶段，但是很少用
⚠️：大部分时间默认就存在冒泡机制，但是少部分事件天生就自己阻止了冒泡传播
  mouseenter/mouseleave // 进入离开 默认阻止了冒泡传播
  mouseover/mouseout  // 悬浮 没有阻止冒泡 很恶心 最好不用 或者阻止冒泡事件

• 【手指事件对象】TouchEvent
  
• ...
  

• 事件对象中常用的属性

• target & srcEvent
• type
• code & key
• keyCode & which
• which/keyCode
• clientY/clientX
• pageX/pageY
• preventDefault
• stopPropagation