第十节课

第十节课

事件

事件对象Event

• 如何获取Event对象

• event属性

  • timeStamp

    • 返回事件生成的日期和时间

  • bubbles

    • 是否为冒泡事件

  • button

    • 事件被触发时，是哪个按钮被点击

  • pageX、pageY

    • 光标对应当前网页的水平位置和垂直位置

  • screenX、screenY

    • 光标对应当前显示器的水平位置和垂直位置

  • clientX、clientY

    • 光标对应当前可视区域的水平位置和垂直位置
      

• Event

  • div跟随鼠标移动
    

  • 获取鼠标在div中的坐标
    

  • 商品放大镜
    

事件传播和事件冒泡

• DOM事件流

  • DOM事件的传播分为三个阶段

• 事件的三个阶段

  • 事件捕获
  • **重点：捕获阶段，事件一次传递的顺序是：window—>document—>html—>body—>父元素、子元素、目标元素
  • 最先接受到时间的是window

  • 补充

    • 如何获得html节点
    • 如何获得bodt节点

• 事件冒泡

  • 当一元素上的个事件被触发的时候（比如说鼠标点击了一个按钮），同样的事件将会在那个元素的所有祖先元素中被触发，这一过程被称为事件的冒泡；这个时间从原始元素开始一直冒泡到DOM树的最上层
  • 通俗来讲，冒泡指的是：子元素的事件被触发时，父元素的同样事件也会被触发。取消冒泡就是取消这种机制

  • 冒泡顺序

    • button—>div—>body—>html—>document—>window

  • 不是所有的时间都会冒泡

    • blur
    • focus
    • load
    • unload
    • onmouseenter
    • onmouseeleave

  • 如何判断事件是否冒泡

    • event.bubbles

  • 如何阻止事件冒泡

    • event.stopPropagetion();

• 目标

  • event.target
    

事件委托

• 把一个元素的响应事件的函数委托给另一个元素
  

键盘事件

• 键被按下：onkeydown

• 键被松开：onkeyup

• 判断
  

样式和动画

• style和行内样式

• offset和匀速动画

• scroll和缓动动画

• client可视区