Shadow DOM中的事件

shadow DOM内部封装着一些事件。基本上，如果一个事件在shadow DOM内触发了，从外部来看，他就像由宿主元素本身触发，而不是来自shadow DOM的某个元素，这就是所谓的事件重新设定。

然而在shadow DOM的内部，事件并不会重新指向，我们可以找到事件发生和对应的元素。

如果我们把DOM树扁平化，就像这样..

  1. <body>
  2.     <custom-picture>
  3.         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  4.         #shadow-root
  5.             <button> Hello </button>
  6.         ---------------------------------
  7.     </custom-picture>
  8. </body>

在点击按钮、点击body元素或者自定义图片外面的任何区域，event.target 会指向<custom-picture>本身。

如果影子树属性设置为open, 调用 event.composedPath() 会返回该事件发生的所有节点组成的一个数组集.

然而在<custom-picture>内部，event.target 会指向它真正被点击的按钮元素上。

大多数事件会走出 shadow DOM 边界，而且当事件发生的时候，他们被阻碍了。有些事件不被允许穿过这个边界，没错，是这些…

  • abort
  • error
  • select
  • change
  • load
  • reset
  • resize
  • scroll
  • selectstart