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

努力的Greatiga

发布于 2022-07-25 02:17:36

1.9K00

代码可运行

文章被收录于专栏：前端开发与网站建设前端开发与网站建设

运行总次数：0

代码可运行

事件流

这一概念源自于对事件触发对象的思考。例如常见的点击事件，鼠标移动事件。这些事件发生之时，往往不只是点击或者移动到某一特定元素上。
比如点击某一个按钮，而它是由上一层的父标签，或许在上一层还有父标签甚至是整个页面。因此点击一个元素可以看成是同时点击了父标签或者整个页面。那么此时事件应该怎么响应到指定标签呢？

事件冒泡

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

<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 系统停止跟踪触发

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

jquery

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

jquery

html

登录后参与评论

0 条评论

热度

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

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 事件

设备事件

触摸与手势事件

触摸事件

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐