task33 进阶：DOM 事件

上一次课程的dom events知识？

事件模型.png

用实际例子学习dom事件模型
——点击别处关闭浮层的效果
搜 bootstrap popover
bootstrap-popover

三角形.png

怎么给浮层加个三角形的？？？

stopPropagation.png

给btn加一个eventListener，将浮层显示
给document加一个eventListener，将浮层隐藏
但因为冒泡，在点击btn的时候会先执行btn的el，再执行document的el，先显示马上再隐藏，没有效果。

image.png

怎么解决呢？
——给wrapper（包括btn和浮层）添加阻止冒泡 e.stopPropagation()，这样就不会执行document的事件监听了

image.png

• 用jquery实现

  
  
  

  jq+one.png
  
  

  ——改用jq实现，on改成one，只执行一次，节省内存
  用one了，可以不阻止冒泡吗？？

  
  
  

  image.png

image.png

——不行，在click btn的时候，先执行show()，再执行给documnet加EL，然后马上就嫁给document了，接着向上冒泡，因为没有阻止，到document了，就会执行这个EL，隐藏浮层。马上就加了EL，紧接着就执行了

• 解决方案1：阻止冒泡

• 解决方案2：用setTimeout，等冒泡阶段完成后再添加el

  
  
  

  image.png
  
  

  先冒泡，click向上冒泡阶段完成了后才执行setTimeout里面的代码

• 课后习题浮层-我的实现：
  代码地址
  预览地址

冒泡的可视化.png

会从里面一层依次向外层执行