DOM事件触发顺序
对于如何给DOM绑定JavaScript的事件,在之前的文章已经比较详细的介绍了三种方式的区别和优缺点。不过,仍然还有一些遗留问题没有详细讲述,比如addEventListener的第三个参数useCapture有何神奇之处;假如HTML元素的自身和其父结点都绑定了相同类型的事件, 这些事件的激发过程又是如何处理的呢。
每一个HTML页面,在被浏览器解析后,都会生成一个树形结构,而每一个结点都是一个对应于标签(Tag)的DOM(Document Object Model)实例。树形数据结构上,其深度体现着父子关系(parent/child),其广度表现为兄弟关系(sibling)。这些DOM实例首先是用作呈现页面,在页面呈现上(若不指定特殊的布局样式,如z-index、relative position、float):子结点会被父结点包裹,但是父结点会被子结点全部或部分覆盖,而同层的结点则按从上往下,从左往右的顺序依次排布——(这只是对HTML页面呈现的简单布局流描述,其实根据样式的不同,过程更复杂)。另一方面,它们还是事件目标,用来接收页面上触发的事件。
Read More →