组成、样式

• 年轮图案
• 各div设置颜色，x选择器为变化样式，由js调动

效果

• .x选择器作为反映鼠标事件的载体，反映鼠标监听事件
• 年轮图案颜色变化形象地反映出W3C标准下，事件处理机制
• 点击圆心部分，颜色由外向内变化，再由内向外变化

JS代码

• 1号区
  • 常用DOm指令找到各div
• 2号区
  • 定义函数fn,控制事件捕获效果
  • 定义函数fm,控制事件冒泡效果
• 3号区
  • 事件绑定api，根据W3C标准传参，反映出事件捕获和事件冒泡过程

代码图解

• 无论怎样，两个过程都是要走的，

• 只不过根据事件绑定api的传参情况，在哪一个过程调用函数，另一个过程空运行