Web 技术研究所

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

从各种节点冒过来的事件

  一般我们说 DOM 事件通常都只是在元素和文档上的,因为只有它们会响应用户操作产生的事件。但其实事件是封装与节点层而不是元素层,所以文本节点同样有事件相关的支持。虽然文本节点不会响应用户操作产生的事件,但如果主动派送一个事件,它同样可以冒泡上去。
  下面这个代码就是把一个奇奇怪怪的事件绑定到了文本节点上:
<script> addEventListener('DOMContentLoaded', () => { let text = new Text('test'); document.body.appendChild(text); text.addEventListener('fuck', () => { alert('fuck on text'); }); document.body.addEventListener('fuck', () => { alert('fuck on body'); }); var event = document.createEvent('Events'); event.initEvent('fuck', true, true); text.dispatchEvent(event); }); </script>   文本节点是可以正常冒泡的,而且 event.target 也就指向这个文本节点。
  同样的,注释节点也可以冒泡。
<script> addEventListener('DOMContentLoaded', () => { let comment = new Comment('fuck'); comment.addEventListener('fuck', () => { alert('fuck on comment'); }); document.body.appendChild(comment); document.body.addEventListener('fuck', ({ target }) => { alert('fuck on body'); }); var event = document.createEvent('Events'); event.initEvent('fuck', true, true); comment.dispatchEvent(event); }); </script>   因为这些节点都是和元素同级的,可以被作为 child 插入某个元素中。它们是 parent 关系,所以可以冒泡。而属性节点虽然也是节点,也可以绑定和触发事件,但由于他和父元素是 owner 关系,不是 parent 关系,所以不会冒泡过去。 <script> addEventListener('DOMContentLoaded', () => { document.body.setAttribute('a', 1); let a = document.body.attributes[0]; a.addEventListener('fuck', () => { alert('fuck on attr'); }); document.body.addEventListener('fuck', () => { alert('fuck on body'); }); var event = document.createEvent('Events'); event.initEvent('fuck', true, true); a.dispatchEvent(event); }); </script>
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^