页面触发一个事件时,会按照一定的顺序来响应事件,事件的响应过程为事件流。
浏览器规定了两种事件流模型:捕获型事件流和冒泡型事件流。
而 DOM 标准规定事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。
参数为 true 时,顺序为 div -> p -> span。事件捕获阶段
参数为 false 时,顺序为 span -> p -> div。事件冒泡阶段 默认
注意:通过 on 绑定的事件,也是事件冒泡阶段执行。
常见用途:
事件代理:事件代理的原理用到的就是事件冒泡和目标元素,把事件添加到父元素,等待子
元素事件冒泡,并且判断是哪个子元素,从而做相应处理。
适用于子元素比较多,而且事件相同的情况下。
优点:将多个事件函数减少到一个,因为事件函数要驻留内存,这样就提高了性能。
这是不使用事件代理的写法,需要循环 li 标签绑定事件。如下:
这是使用事件代理的写法,通过事件对象来判断点击的是否 li 标签。如下:
e 表示 event 是事件对象模型,e || window.event 与 e.target || e.srcElement 是兼容 IE 浏览
器的写法。toLowerCase() 是将字符串全部转换成小写。toUpperCase()是转换为大写。