DOM事件相关

什么是DOM

DOM是 JS操作网页的接口,全称 文档对象模型 (Document Object Model)。它的作用是将网页转化为一个JS对象,从而可以用脚本进行各种操作(增删改查)。

什么是事件委托?

事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

事件的冒泡原理

image.png

事件委托的原理

事件委托就是利用事件的冒泡原理实现的,事件触发的过程就是从顶层节点 Document 开始一层一层往下找,当找到要触发的事件元素时,事件从触发的节点逐级向上传播(这个过程就是事件冒泡),并且这个过程会触发所有的同事件。

事件委托代码示例

考虑一种情况,如果需要给多个 li 元素注册一个点击事件该如何做?比较原始的办法是循环遍历多个li 元素给他们分别注册一个点击事件。另一个方法就是采用事件委托的方式,给li的父元素注册点击事件。

循环遍历

  • 111
  • 222
  • 333
  • 444

事件委托

  • 111
  • 222
  • 333
  • 444
document.getElementById('ul').onclick = function (e) { e = e || window.event; console.log(e.target.innerHTML); }

怎么取消事件冒泡?

捕获不可以取消,但冒泡可以

stopPropagation()可以终端冒泡,浏览器不在向上走。

怎么阻止默认行为?

有些事件不能阻止默认行为

MDN搜索 scroll event,可以看到Bubbles 和 Cancelable
Bubbles 的意思是该事件是否冒泡,所有的冒泡都可以取消
Cancelable 是开发者是否可以阻止默认事件,它与冒泡无关

如何阻止默认行为?

使用 event。preventDefault()或者 return false

你可能感兴趣的:(DOM事件相关)