DOM事件

事件及常见的事件

事件：文档（html 元素及 document）或者浏览器的窗口发生的一些特定的交互瞬间；可以监听这些事件，来实现在事件发生时执行特定的操作；

  1. let btn = document.querySelector('.btn');
  2. let box = document.querySelector('.box');

常见的事件：

  • 1.1 鼠标事件：鼠标动作时触发的事件
  • 元素.onclick = function() {} 单击事件
  • 元素.ondbclick = function () {} 双击事件
  • 元素.onmouseenter = function () {} 鼠标移入
  • 元素.onmouseleave = function () {} 鼠标移出
  • 元素.onmouseover = function () {} 鼠标滑过
  • 元素.onmouseout = function () {} 鼠标划出
  • 元素.onmousemove = function () {} 鼠标移动
  • 元素.onmousedown = function () {} 鼠标按下
  • 元素.onmmouseup = function () {} 鼠标抬起
  • 元素.onmousewheel = function () {} 鼠标滚轮滚动
  1. box.onmouseover = function () {
  2.     console.log(1111)
  3. };
  4. box.onmouseout = function () {
  5.     console.log(2222)
  6. };
  7. box.onmousedown = function () {
  8.     console.log('3333')
  9. };
  10. box.onmouseup = function () {
  11.     console.log(4444)
  12. };
  13. box.onmousewheel = function () {
  14.     console.log(555);
  15. };
  • 1.2 键盘事件：一般 input/textarea/document.body/document/window/document.documentElement 监听键盘事件
    • 元素.onkeydown = function() {} 键盘按下
    • 元素.onkeyup = function () {} 键盘抬起
  1. let input = document.querySelector('#input');
  2. input.onkeydown = function () {
  3.     console.log('123')
  4. };
  5. document.onkeyup = function () {
  6.     console.log('keyup')
  7. };
  9. window.onkeydown = function () {
  10.     console.log('window key down')
  11. };
  • 1.3 表单元素事件
    • onfocus 获取焦点（光标）事件
    • onblur 失去焦点时触发
    • onchange 事件，表单的值（value）发生改变时触发
    • oninput input、textarea 等元素的输入事件
  1. input.onfocus = function () {
  2.     console.log('获取焦点')
  3. };
  5. input.onblur = function () {
  6.     console.log('失去焦点')
  7. };
  9. input.oninput = function () {
  10.     console.log(this.value);
  11. };
  • 1.4 系统事件：
    • window.onload 页面中所有的资源全部加载完触发
    • window.onresize 当前窗口尺寸发生改变时触发
    • window.onscroll 滚动条滚动时触发
  1. window.onresize = function () {
  2.     console.log('变了、变了');
  3. };
  • 1.5 移动端事件`
    ontouchstart 触摸元素时触发
    ontouchend 离开元素时触发
    ontouchmove 滑动时触发
  • 移动端使用 click 大概有 300ms 的延迟
  1. box.ontouchstart = function () {
  2.     console.log('start');
  3. };
  4. box.ontouchend = function () {
  5.     console.log('end')
  6. };

1.2 事件对象

在事件触发时，浏览器传递给事件函数的实参；其中包含了本次事件触发的具体信息；

  1. let box = document.querySelector('.box');
  3. box.onclick = function (e) {
  4.     console.log(e); // MouseEvent e一般称为事件对象，
  5.     // e.clientX 鼠标点击的位置相对于当前浏览器可视窗口的 左偏移值
  6.     // e.clientY 鼠标点击位置相对于当前浏览器可视窗口的 上偏移值
  7.     // e.pageX 鼠标点击位置相对于 body 左边缘的偏移值
  8.     // e.pageY 鼠标点击位置相对于 body 上边缘的偏移值
  9.     // e.target 触发事件的元素（点击事件中是点击的元素）对象，称为事件源
  11.      // IE事件触发时是把事件信息挂载在 window.event 这个属性上
  12. };
  14. document.onkeydown = function (e) {
  15.     // 键盘事件 KeyboardEvent 
  16.     console.log(e);
  17.     console.log(e.keyCode);
  18.     // e.keyCode 键码：键盘上每个键对应一个键码，当 keydown 事件触发时
  19. };

1.3 默认事件和默认行为

有些元素时由默认行为的，如a标签点击会跳转。

  1. let baidu = document.getElementById('baidu');
  2. // 阻止默认行为：
  3. baidu.onclick = function (e) {
  4.     alert(111);
  5.     e.preventDefault(); // 阻止元素的事件默认行为
  6.      // IE 低版本：e.returnValue = false
  7.      return false; // return false也可以阻止默认行为
  8. };

1.4 事件传播：

  1. let $ = (selector) => document.querySelector(selector);
  3. let outer = $('.outer');
  4. let inner = $('.inner');
  5. let center = $('.center');
  6. document.onclick = function () {
  7.     console.log('document')
  8. };
  9. outer.onclick = function () {
  10.     console.log('outer')
  11. };
  12. inner.onclick = function () {
  13.     console.log('inner')
  14. };
  15. center.onclick = function (e) {
  16.     console.log('center');
  17.     e.stopPropagation();
  18. };
  • 点击 center 会触发 center 的点击事件，同时 inner 和 outer 的以及更高层级的元素的点击事件也会被触发。这种现象称为事件的冒泡机制；

事件的触发过程：事件的触发分为两个三个阶段：捕获阶段、目标阶段、冒泡阶段。在事件触发时，浏览器先从最外层的元素开始找，一直找到事件源的过程称为捕获阶段，触发事件源绑定事件后开始向上冒泡，依次触发父级元素的该事件；

  • 元素.onXXX = func… 绑定的事件都是 DOM0 级事件，DOM0 级事件都是绑定再冒泡阶段的。
  • 取消冒泡：e.stopPropagation()
    • IE低版本：e.cancelBubble = true;
    • 取消冒泡后，事件不会再向上传播；更高层级的元素的对应事件不会触发；

1.5 onmouseover 和 mouseenter

  1. let $ = selector => document.querySelector(selector);
  2. let inner = $('.inner');
  3. let outer = $('.outer');
  • mouseover
  1. inner.onmouseover = function () {
  2.     console.log('inner over');
  3. };
  5. inner.onmouseout = function () {
  6.     console.log('inner out')
  7. };
  9. outer.onmouseover = function () {
  10.     console.log('outer over')
  11. };
  12. outer.onmouseout = function () {
  13.     console.log('outer out')
  14. };
  • mouseenter
  1. inner.onmousenter = function () {
  2.     console.log('inner enter');
  3. };
  5. inner.onmouseleave = function () {
  6.     console.log('inner leave')
  7. };
  9. outer.onmouseenter = function () {
  10.     console.log('outer enter')
  11. };
  12. outer.onmouseleave = function () {
  13.     console.log('outer leave')
  14. };
  • mouseenter & mouseover的区别：
  1. over属于划过事件，从父元素进入子元素，属于离开了父元素，会触发父元素的out事件，然后触发子元素的over事件；
  2. enter属于进入，从父元素进入子元素，不算离开父元素，不会触发父元素的leave事件；
  3. enter 和 leave 是阻止了事件冒泡的，而over和out还存在冒泡传播；

所以对于父子嵌套的这种情况，使用over会触发很多不可控的情况，使用enter更加简单。

二、 onload和DOMContentLoaded


    1. onload事件：加载成功后执行
  • window.onlaod 是页面中所有的资源（css、js、图片等）全部加载完成后才会触发：
  1. window.onload = function () {
  2.     console.log('加载完成了')
  3. };

    1. DOMContentLoaded: 只要页面中的DOM结构加载完成后就可以触发
  1. document.addEventListener('DOMContentLoaded', function () {
  2.     console.log('DOM结构加载完成了')
  3. });
  • JS是用来操作DOM的，一般需要在DOM加载结束以后再执行JS。
  1. document.addEventListener('DOMContentLoaded', function () {
  2.     // 以后经常有人会这样写代码，把js这在这个函数中，表示DOM结构加载完成后再执行
  3. });

三、事件委托

  • 页面中有10个li，点击哪个li，就弹出该li的文本内容

let liList = document.querySelectorAll(‘#list > li’);

  1. for (let i = 0; i < liList.length; i++) {
  2.     liList[i].onclick = function () {
  3.         alert(this.innerText);
  4.     }
  5. }
  • 利用事件委托：把事件绑定给父级元素或者更高级元素，然后根据e.target事件源作出不同操作；
  1. let list = document.querySelector('#list');
  2. list.onclick = function (e) {
  3.     let { target } = e;
  5.     // 一般根据事件源的tagName来区分当前点击的是哪个元素
  6.     if (target.tagName.toLowerCase() === 'li') {
  7.         alert(target.innerText);
  8.     }
  9. };
  • 循环绑定事件的效率低，而且不适用于动态绑定的数据。
  • 事件委托：利用的是事件的冒泡传播机制，给里面的每个子元素绑定相同的事件行为，把事件绑定给他们共同的上级元素，然后利用e.target区分具体触发事件的元素，然后做不同的操作；