Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

Shadow DOM与DOM事件

  Shadow DOM可以将其封装的内部CSS从文档中隔离开来,但对于普通的DOM操作并没有额外的隔离。那么同样和DOM操作有关的DOM事件又隔离的如何呢?既然是封装,要是事件可以随便穿透不就扯淡了嘛。Shadow DOM对事件的处理方法姑且还是可以接受的。
  如果把事件监听绑定在外部,事件冒泡后在事件参数中得到的target只能获取到Shadow DOM的宿主元素,而不能得到更精确的点击元素。 <div id="panel"></div>
<script>
var root=panel.webkitCreateShadowRoot();
root.innerHTML='<input type="button" value="点我试试" />';
document.onclick=function(e){
  console.log(e.target);
};
</script>
  而内部元素如果可以访问到也是可以正常绑定事件的,比如通过shadowRoot <div id="panel"></div>
<script>
var root=panel.webkitCreateShadowRoot();
root.innerHTML='<input type="button" value="点我试试" />';
root.querySelector("input").onclick=function(e){
  console.log(e.target);
};
</script>
  其实未必要从root开始选择,Shadow DOM的设计本身就不是一个完闭的封装,通过一些API依然可以访问到内部元素,比如在CSS中使用“/deep/”等。
  一些特殊情况,比如宿主元素原本不支持的事件在绑定也可能被触发,比如下面的测试 <div id="panel1"><input value="panel1" /></div>
<div id="panel2"></div>
<script>
//绑定focus事件
panel1.onfocus=panel2.onfocus=function(e){
  console.log(e.target);
};
//为panel2创建ShadowRoot
panel2.webkitCreateShadowRoot().innerHTML='<input value="panel2" />';
</script>
  panel1中自有input元素,但是focus不会冒泡到容器上。而panel2中创建了ShadowRoot,整个宿主自己就变成了个控件,所以可以正常触发。
  总之,Shadow DOM中的事件是不穿透的,但可能造成一些特殊的影响。具体只有经过更多的测试才能了解,这里就偷个懒,不再做更多测试了。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^