JavaScript中的事件

事件

---

• 事件流

  • 概念：当一个标签触发事件以后，从这个标签沿着一个方向传递，这就叫事件流。是浏览器处理事件的方法。

  • 分类：

    • 冒泡（从下到上）（IE只支持）
    • 捕获（从上到下） （网景）
    • DOM事件流—DOM浏览器 (先捕获，后冒泡)（默认冒泡）（如果两种方法都存在，最后顺序由代码决定）

• 事件处理方法

  • 内嵌事件
    尽量避免使用内嵌事件

  • DOM0级事件 

    • 优点：兼容各个浏览器
    • 缺点：只能为一个事件添加一个处理方法
    • 添加、删除，可以用null覆盖事件

  • DOM2级事件

    • addEventListener (dom浏览器)

      addEventListener（"click"，function（）{}，true代表捕获/false代表冒泡）//三个参数

      • 缺点：兼容有问题
      • 优点：能为一个事件添加多个处理方法
      • 删除：removeEventListener 注意三个参数必须一样，特别注意函数名

    • attachEvent （IE浏览器）

      • 删除：tetachEvent（）两个参数，除去第三个

• 事件类型

  • 鼠标
    • mouse
    • over out 还会执行 里面有子元素
    • enter leave 子元素没有影响

  • 键盘

    • key -down 一直按着
    • up 弹起执行
    • 按下弹起执行

  • 其他 

    • onscroll

• 事件对象（Event）

  • dom浏览器

    • 获取方法 ：函数里传入一个e
    • clientX clientY //鼠标相对于浏览器
    • screenX screenY //鼠标相对于窗口

  • IE 

    • e =window.event || e ； 做兼容

  • 属性

    • onkeydown 键值，不分大小写
    • onkeyup
    • onkeypress 字符码
    • keyCode （常用）
    • charCode
    • which

  • 阻止事件的默认行为（方法）

    • e.preventDefault（）；（dom）
    • e.returnValue=false； （IE）

  • 阻止事件冒泡

    • e.stopProopagation//DOM
    • e.cancelBubble=true；//IE

• 技巧

  • border-collapse：collapse；
  • border-spaceing：0；
  • 还原颜色 ""
  • parseInt（moveDiv.style.left || 0）； //常见的数初始化技巧

• 事件委托

  • 子元素不处理，父元素来处理事件。