DOM事件基本概念大总结(前端必备)

事件流

这一概念源自于对事件触发对象的思考。例如常见的点击事件，鼠标移动事件。这些事件发生之时，往往不只是点击或者移动到某一特定元素上。

比如点击某一个按钮，而它是由上一层的父标签，或许在上一层还有父标签甚至是整个页面。因此点击一个元素可以看成是同时点击了父标签或者整个页面。那么此时事件应该怎么响应到指定标签呢？

事件冒泡

即事件从指定元素开始传播到最外层的元素，并且该事件不仅会在指定元素上发生，还会在传播过过程中的每一个元素上发生。

<html>
  <body>
    <div>
      <button>click</button>
    </div>
  </body>
</html>

事件冒泡: button -> div -> body -> html -> document

如上，再点击click之后，事件从 button 开始传播至 html ，再到 documet。这一个过程也称为事件冒泡

事件捕获

与事件冒泡刚好相反，事件从最外层的 documet 开始一直往里面，直到点击的元素才停止

<html>
  <body>
    <div>
      <button>click</button>
    </div>
  </body>
</html>

事件冒泡: documet -> html -> body -> div -> button

如上，再点击click之后，事件从 documet 开始传播至 button。这一个过程也称为事件捕获

DOM 事件流

在上述两种事件确定的方式下，规定了事件处理的三个阶段。事件捕获阶段、处于目标阶段、事件冒泡阶段。同时 DOM明确规定

事件捕获阶段不会处理事件
处于目标阶段属于冒泡阶段的一部分，并且会触发事件。
然而实际上，几乎所有主流浏览器都支持在事件捕获阶段触发事件，它们并没有遵守规定

事件处理程序

主要是指 DOM 如何处理各种 HTML 上的程序。

对于所有浏览器来说，有两种标准用来操作事件的添加与删除，一种是 DOM2 事件处理程序，一种是 IE 事件处理程序。

DOM2 级事件处理

直接调用该 dom 对象的事件属性，并将相应的执行函数赋予它

addEventListener() 和 dom.on(事件) = 函数

利用 dom 对象的事件属性直接赋予一个执行函数；利用 addEventListener 添加，并且该方法可以添加多个

addEventListener() 有三个参数，参数 1 为事件、参数 2 为执行函数。参数 3 为一个布尔值，false 代表在冒泡阶段执行，true 表示在捕获阶段执行

var doc = document.querySelector('div');
doc.onclick = function() {
  alert(1);
}
doc.addEventListener('click', function() {
  alert(2);
}, false)
doc.addEventListener('click', function() {
  alert(3);
}, false)

removeEventListener() 和 dom.on(事件) = null

利用直接设置事件属性为 null 来移出执行函数。利用 removeEventListener() 来移出，但前提是必须给定函数名

removeEventListener() 有三个参数，参数 1 为事件、参数 2 为执行函数。参数 3 为一个布尔值，false 代表在冒泡阶段执行，true 表示在捕获阶段执行

如下使用匿名函数定义的执行函数无法删除

var doc = document.querySelector('div');
doc.addEventListener('click', function() {
  alert(2);
}, false)//通过匿名函数定义的
doc.removeEventListener('click',function() {
  alert(2);
}, false);//无效
doc.onclick = null;//有效
function Click() {
  alert(2);
}
doc.addEventListener('click', Click, false)//
doc.removeEventListener('click', Click, false);//有效

IE 级

attachEvent()

和 DOM 2 级一样用来添加事件，只有两个参数 "事件" 和 "处理函数"，不能设置冒泡或者捕获。因为 IE8 之前那只支持冒泡，所以就只能冒泡

同样可以添加多个执行函数

detachEvent()

和 DOM2 级一样，要删除必须给定函数名作为参数。无法删除通过匿名定义添加的执行函数。

封装跨浏览器的事件处理函数

因为 IE 独树一帜，又因为 IE 属于 windows 用户标配；所以兼容需要考虑。否则代码在 IE 上可能出问题

const EventHandle = {
  addEvent: (element, type, fn) => {
    if(element.addEventListener) {
      element.addEventListener(type, fn, false);
    } else if(element.attachEvent) {
      element.attachEvent(type, fn);
    } else {
      element[`on${type}`] = fn;
    }
  },
  removeEvent: (element, type, fn) => {
    if(element.removeEventListener) {
      element.removeEventListener(type, fn, false);
    } else if(element.detachEvent) {
      element.detachEvent(type, fn);
    } else {
      element[`on${type}`] = null;
    }
  },
}

let doc = document.querySelector('div');
function T() {
  alert(13);
}
EventHandle.addEvent(doc, 'click', T);
EventHandle.removeEvent(doc, 'click', T);

事件对象

事件对象作为事件发生给予 js 获得相关信息的机会非常重要。程序要根据这些信息作出相应的响应。

DOM 事件对象

必定会传一个 event 对象给执行函数。可以直接作为参数使用。但有两种情况需要注意

通过直接在 html 元素上添加的事件，必须写明参数为 event，响应执行函数也要写明该参数
通过 addEventListener() 添加的事件，只需要在执行函数上写明参数就行。

<div onclick="Test(event)"></div>
<script>
  function Test(event) {
    console.log(event.type);
  }
</script>

let doc = document.querySelector('header');
doc.addEventListener('click', function(event) {
  console.log(event.target.tagName,event.type);
}, false);

常用属性

bubbles Boolean 表明事件能否冒泡
cancelable Boolean 是否能取消事件的默认行为
currentTarget Element 当前事件处理程序正在处理的元素
defaultPrevented Boolean 为 true 表示调用了 preventDefault()
eventPhase Integer 1 为捕获阶段 - 2 - 为处于目标阶段 - 3 为冒泡阶段
preventDefault() 取消事件的默认行为，前提是 cancleable 为 true
target 事件的目标，就是触发事件的对象
type 事件类型

target 与 currentTarget

这里的 currentTarget 是指发生事件时，该事件所绑定的那个元素

而 target 从始至终就都是你点击或者移动或者其他触发事件行为的元素

<div onclick="father(event)">
  <button>1</button>
  <button onclick="son(event)">2</button>
</div>
<script>
  function father(event) {
    console.log(event.target, event.currentTarget);
  }
  function son(event) {
    console.log(event.target, event.currentTarget);
  }
</script>

看上述这个例子。

情况一：点击 button 2；按照事件冒泡那么两个执行函数都会触发
- target: 两个函数的输出值都为 button 2；因为点击的是该元素
- currentTarge: son() 输出的为 button 1；father() 输出为 div
情况二：点击 button 1；只会触发 father()
- target: 输出为 button 1；因为就是点击在 button 1 上
- currentTarget：输出为 div；因为该执行函数就绑定在该元素上
情况三：点击 div；只触发 father()
target 和 currentTarget 都为 div

另外，执行函数中的 this 值指向 currentTarget；但是有个前提，this值要等于 currentTarget,那么必须是在target上或者事件是通过 sddEventListener 添加的。否则通过html元素直接绑定的方式this指向了 window 对象

eventPhase 和 stopPropagation

eventPhase 可以知道事件执行时处于哪个阶段

stopPropagation 可以阻值事件继续冒泡传播。我们知道一般事件是在处于目标阶段到冒泡阶段执行的。倘若不阻止冒泡，那么点击一个小按钮，一直回溯到 document。那么整个页面许多地方的点击事件都会触发，很显然我们不想这样。

<div onclick="father(event)">
  <button>1</button>
  <button onclick="son(event)">2</button>
</div>
<script>
  function father(event) {
    console.log(event.target, event.currentTarget);
  }
  function son(event) {
    console.log(event.target, event.currentTarget, event.eventPhase);//button button 2
    event.stopPropagation();//阻止继续冒泡。这样就不会触发 father 了
  }
</script>

当然该方法同样可以阻止捕获，不过前提是绑定事件时指定他在捕获阶段触发。这样一来就不会继续捕获下去了

IE 事件对象

为什么不能统一呢，非要学两套

IE 事件对象与 DOM 级有一定差异

常用属性

cancelable 默认值为 false，true 为取消冒泡。与 DOM 中 stopPropagation 相似
returnValue 默认为 true，false 为取消事件默认行为，与 DOM 中 preventDefalut() 相似
srcElement 事件目标，与 DOM target 相似
type 事件类型

event 对象的获取

IE 中的 event 对象时作为 window 对象的一部分存在，可以通过 window.event 来获取

通过文档对象赋值的方法，必须要指定 window.event ，直接使用 event 会报错 undefined

var doc = document.querySelector('#id');
doc.onclick = function (event) {
  console.log(event.type);//event undefined
  var event = window.event;
  console.log(event.type);//click
}

通过 attachEvent() 添加的可以像 DOM 那样作为参数直接使用

doc.attachEvent('click', function(event) {
  console.log(event.type);//click
});

总结

执行函数中关于事件元素的信息都可以通过 event 获取，虽然 this 值有时也会等于 event 的部分属性。但是建议用 event，因为 this 的指向取决于外部执行环境，不能保证得到想要的值。

另外，IE 要没了。取而代之的是微软新浏览器 Edge ，这个浏览器好像已经统一了 DOM级规定的事件处理。原来 IE 的那些特有事件处理已经没有了

事件Type

常见的事件类型

UI事件

界面发生的事件

load 事件

当页面完全加载，包括所有图像、js 文件、产生式文件等外部资源。之后就会触发该事件。添加事件的方法？建议使用之前写的跨浏览器事件处理方法。当然也可以通过获取 dom 对象，并对其属性赋值，也可以直接在 html 元素上绑定。但是这两个方法下的 event 对象的使用有区别，特别是在 IE 浏览器上

在 window对象下触发整个页面的加载；

window.addEventListener('load', function(event) {
  console.log(event.target, '加载完毕');
})

用来加载图片

绑定事件后，设置 img 的 src 即刻加载。可以用来做图片的预加载。

let image = new Image();
image.addEventListener('load', function(event) {
  console.log(event.target, '图像加载完毕');
})
window.addEventListener('load', function(event) {
  console.log(event.target, '页面加载完毕，开始加载图像');
  image.src = `https://timgsa.baidu.com/jz.jpg`;
})

用来加载 js 外部文件

let js = document.createElement('script');
js.addEventListener('load', function(event) {
  console.log(event.target, 'js加载完毕');
})
window.addEventListener('load', function(event) {
  console.log(event.target, '页面加载完毕，开始加载js');
  js.src = `./xxx.js`;
})

unload 事件

与 load 事件相反，一般页面切换后触发，可用来强制的引用清除，防止内存泄漏

window.addEventListener('unload', function(event) {
  console.log(event.target, '跳转了');
})

resize 事件

当页面大小发生改变时触发，可以用此来获取一些窗口属性，用来做响应式开发。但是大小改变检测很灵敏，所以需要做防抖

window.addEventListener('resize', function(event) {
  console.log('大小改变');
  console.log(window.innerWidth, window.innerHeight);
})

scroll 事件

scrollLeft 和 scrollTop

这是存在于 document 上的两个属性，分别代表滚动条已经滚动的高度和宽度。他们与 clientWidth 、clienHeight一样都是页面视口的属性，并非整个浏览器创口属性。

该事件是在 window 对象上发生的，与 scrollTop，scrollLeft 有关。监听该事件可以用来做导航栏的变化，同样要做防抖，否则容易卡顿

window.addEventListener('scroll', function(event) {
  console.log('滚动');
  console.log(document.documentElement.scrollTop, document.documentElement.scrollLeft);
})

焦点事件

焦点一般只鼠标的焦点，虽然可以检测鼠标事件来监控，但是焦点可以通过键盘移动所以有专门的事件监控。焦点事件标准不一，但是 DOM3 统一了一个标准并且规定了它的发生顺序

当一个元素移动到另一个元素会依次触发以下事件;一般 blur 与 focus 常见

focusout 在失去焦点元素上触发，会冒泡
focusin 在获取焦点元素上触发，会冒泡
blur 在失去元素上触发，不会冒泡
DOMFocusOut 在失去焦点元素上触发，会冒泡; Opera 专有
focus 在获取焦点元素上触发，不会冒泡
DOMFocusIn 在获取焦点元素上触发，会冒泡; Opera 专有

鼠标与滚轮事件

鼠标点击与移动

主要是点击、双击、光标移入、移出、暗下、放开的操作；

mouseenter 首次移入元素内部触发，不冒泡
mouseleave ，移出元素触发，不冒泡
mousemove 在元素内重复移动触发
mouseout 移入另一个元素触发
mousedown 按下鼠标触发
mouseup 释放鼠标按键触发
click 点击，只有按下事件和放开事件发生后才会触发，只是按下不会触发
dblclick 双击，当且仅当连续两次 click 时触发

触发顺序：

mousedown
mouseup
click //一次点击
mousedown
mouseup
click //二次点击
dblclick //触发双击

一般可以用于轮播图或者自动播放，当鼠标移入将其停止，移出又自动播放

var doc = document.querySelector('input');
doc.addEventListener('mouseenter', function() {console.log('暂停')} )
doc.addEventListener('mouseout', function() {console.log('开始')} )

滚轮

mousewheel

可用于获取该事件发送时鼠标属性，在任何元素上通过鼠标滚动即可触发。可以检测页面滚动是否来自鼠标。该事件冒泡。

触摸屏

上述事件在移动端上又有所不同

并不支持 dblclick ，双击只会放大
轻击不可单击或者没有绑定 click 的元素什么事件也不会发生
在可点击或者绑定 click 的前提下点击会触发 mousemove 。若该事件改变了内容将不会在发生其他事件，否则可以发生 down、up、click 事件
mousemove 也会触发 mouseenter 和 mouseout
手指滚动页面时会触发 mousewheel 和 scroll 事件

键盘和文本事件

键盘

keydown 敲击任意键时触发，若按住不放则不断触发
keypress 敲击字符健时触发，若按住不放则不断触发
keyup 释放键盘触发

按下字符键时依次触发 keydown -> keypress -> keyup 按下非字符键时依次触发 keydown -> keyup

另外发生 keydown 和 keyup 时，也可以通过 event 对象获取相应的键值(ASCII码值)。keyCode

let doc = document.querySelector('input');
doc.addEventListener('keyup',function(event) {
  console.log(event.keyCode);
})

textInput 事件

触发条件

必须在可编辑区编辑
输入实际字符的键，不会包括删除、退格键等等

可以通过 event.data 获得键盘实际输入值而非 ASCII 码值

let doc = document.querySelector('input');
doc.addEventListener('textInput',function(event) {
  console.log(event.data);
})

设备事件

设备事件不是值页面内的事件，而是移动设备本身事件，比如翻转、是否走动。目前的草案中有四种类型事件

orientationchange ，苹果给 safari 添加的事件用来检测设备从横向观察模式到纵向观察模式。
它的值存在于 window.orientation 中。0 为纵向、90 为向左旋转、-90 为向右旋转
MozOrientation ，firefox 未检测设备而引入，依靠 event 的 x,y,z 来确定方向。该事件可能被替代
deviceorientation
devicemotion

触摸与手势事件

这一类事件是移动设备的事件核心

触摸事件

touchstart 手指触摸屏幕触发
touchmove 手指在屏幕上连续滑动触发。可以调用 preventDefault() 来阻值滑动
touchend 手指离开屏幕
touchcancel 系统停止跟踪触发

本文为原创文章，若文章内容出现抄袭雷同，请联系文章发布人或者网站管理员，我们将认真核实并及时删除。除非另有说明，否则此博客中的所有文章均根据CC BY-NC-SA 4.0许可。如需转载请标明出处，谢谢配合!

DOM事件基本概念大总结(前端必备)

事件流

事件冒泡

事件捕获

DOM 事件流

事件处理程序

DOM2 级事件处理

addEventListener() 和 dom.on(事件) = 函数

removeEventListener() 和 dom.on(事件) = null

IE 级

attachEvent()

detachEvent()

封装跨浏览器的事件处理函数

事件对象

DOM 事件对象

常用属性

target 与 currentTarget

eventPhase 和 stopPropagation

IE 事件对象

常用属性

event 对象的获取

总结

事件Type

UI事件

load 事件

unload 事件

resize 事件

scroll 事件

焦点事件

鼠标与滚轮事件

鼠标点击与移动

滚轮

触摸屏

键盘和文本事件

键盘

textInput 事件

设备事件

触摸与手势事件

触摸事件

END--感谢阅读