事件
事件是用户或者浏览器自己执行的某种动作,是文档或者浏览器发生的一些交互瞬间,比如点击(click)按钮等,这里的click就是事件的名称。JS与html之间的交互是通过事件实现的,DOM支持大量的事件。一个事件被触发时,浏览器会自动从用户操作标签外的最上级标签逐渐向里检查是否有相同事件,如果有则触发,如果没有则继续向下检查知道用户操作的标签,这过程称为捕获,此时浏览器会继续由用户操作标签继续向是上级标签检查,如果有相同事件则触发,如果没有则继续向上检查直到最上级元素为止,此过程称为冒泡。(有监听函数就执行,并提供事件信息,没有就跳过)
事件传播的最上层对象是window,上例的事件传播顺序,在捕获阶段依次为window、document、html、body、父节点、目标节点,在冒泡阶段依次为目标节点、父节点、body、html、document、window。
DOM事件传播的三个阶段:捕获阶段,目标阶段,冒泡阶段
捕获与冒泡
1. 所有冒泡皆可取消,默认动作有的可以取消,有的不能取消。2. Cancelable是用来取消(也可以说是阻止)默认动作的。
从外向内找监听函数叫事件捕获
从内向外找监听函数叫事件冒泡
对于事件绑定的API,IE5、网景和W3C的各有不同:
IE5:
baba.attachEvent('onclick',fn)//冒泡
网景:
baba.addEventListener('click',fn)//捕获
W3C:
baba.addEventListener('click',fn,bool)
addEventListener:
xxx.addEventListener('click',fn,bool) //bool不传或为falsy时为冒泡,true时为捕获
捕获不可以取消,但是冒泡可以取消
取消冒泡:
e.stopPropagation()可打断冒泡,浏览器不再向上走,一般用于封装某些独立组件。