DOM事件与事件委托

知有
287 阅读3分钟

事件捕获与事件冒泡

  • 爷爷 => 爸爸 => 儿子 从外向内找监听函数，叫做事件捕获

  • 儿子=> 爸爸 => 爷爷 从内向外找监听函数，叫做事件冒泡

未避免重复调用，开发者可以自己选择把事件监听放在捕获阶段或者放在冒泡阶段

图解：

image.png

事件绑定API

addEventListenter

IE5: xx.attachEvent(‘onclick’, fn) //冒泡

网景: xx.addEventListener(‘click’, fn) //捕获

W3C: xx.addEventListener(‘click’, fn, bool) //这个bool是用来选择使用冒泡/捕获。
  • 如果bool为空或为falsy，即为使用冒泡；
  • 如果bool为true则使用捕获。 不管是选择哪个，捕获和冒泡两个阶段都是一定会走完过程，只不过是在哪边执行监听函数的问题。

先捕获后冒泡，这是固定的。

代码示例

target V.S. currentTarget

区别：

e.target 用户操作的元素

e.currentTarget 程序员监听的元素

this是e.currentTarget.

举例：

<div>
    <span>文字</span>

</div>

假设监听的是div元素，但用户点击文字内容，那么

e.target就是span

e.currentTarget就是div

取消冒泡

  • 捕获不可取消，但是冒泡可以取消。

  •  e.stopPropagation()可中断冒泡，浏览器不再往上走。一般用于封装某些独立的组件。

不可阻止默认动作

  • 默认动作有的可以取消有的不能取消

  • 查看这个信息的方法：在MDN搜索 关键词 + event，例如搜索 “scroll event”

  • Bubbles 的意思是该事件是否冒泡

  • Cancelable 的意思是开发者是否可以阻止默认动作，与冒泡无关

如何阻止页面滚动

scroll事件不可阻止默认动作

  • 阻止scroll默认动作没用，因为先有滚动才有滚动事件。

  • 要阻止滚动，可阻止 wheel 和 touchstart 的默认动作

  • 注意要找准滚动条所在的元素

  • 但是滚动条还是能用的，可用css让滚动条 width: 0 或者 overflow: hidden可以直接取消滚动条。但此时JS仍然可以修改 scrollTop。

阻止鼠标滚轮事件

x.addEventListener(‘wheel’, (e)=>{

   e.preventDefault()

})

阻止手机触屏滚动事件：

x.addEventListener(‘touchstart’, (e)=>{

   e.preventDefault()

})

用 css 隐藏滚动条：

:: -webkit-scrollbar {

  width: 0  !important }

自定义事件

  • 浏览器自带事件：MDN 事件参考

  • CustomEvent 事件是由程序创建的，开发者在自带事件之外，可以有任意自定义功能的事件。

  • 自定义事件可以使用冒泡 bubbles: true，也可以阻止冒泡 cancelable: false

事件委托

优点

  • 当监听N多个事件时，可以节省内存消耗； 代码示例 100个按钮添加点击事件，只需要监听100个按钮的祖先

  • 监听当前不存在的元素的点击事件（即监听动态元素） 代码示例 监听祖先，等点击的时候看看是不是我们想要监听的元素即可。

封装事件委托

写出一个函数on('click', '#div', 'button', 'fn')

当用户点击'#div'里的'button'元素时，调用fn函数

代码示例

JS支持事件吗？

支持也不支持。JS本身没有事件，只是调用了DOM提供的addEventListener而已。DOM和JS都是浏览器的功能，属于平行关系

avatar
文章
阅读
粉丝