W3C事件模型(代码图解)

489 阅读1分钟

组成、样式

0bae5cd4bdee94f8c246c11baacc982.png

1634020108(1).png

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

效果

51cc115514e5598c8ca79320aa1fdfb.png

1634020201(1).png

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

JS代码

1634020851(1).png

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

代码图解

1634021295(1).png

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

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