javascript事件总结

事件:

名词解释:

  1. 事件源: 绑定在 谁 身上的事件

  2. 事件类型: 绑定 什么 事件

  3. 事件处理函数: 当行为发生的时候, 执行的函数

  4. 事件侦听器: DOM 2级 绑定事件的方式

    -> 标准浏览器: addEventListener()

    -> IE 低版本: attachEvent()

  5. 事件解绑: 取消已经绑定好的事件

    -> DOM 0级事件: 直接赋值为 null

    -> 标准浏览器中 DOM2级事件: removeEventListener()

    -> IE 低版本中 DOM2级事件: detachEvent()

    -> 注意: DOM2级事件的解绑, 在绑定的时候, 要把函数单独书写出来, 以函数名的形式进行绑定

  6. 事件传播: 按照结构父级的顺序, 从元素到 window 传递事件的行为

  7. 事件捕获: 按照从 window 到 目标 的顺序传递行为的过程

  8. 事件冒泡: 按照从 目标 到 window 的顺序传递行为的过程

  9. 事件目标: 当事件触发的时候, 那个准确触发事件的元素

    -> 标准浏览器: target

    -> IE 低版本: srcElement

  10. 阻止事件传播: 不让事件继续传播, 不会触发父级结构的事件函数了

    -> 标准浏览器: stopPropagation()

    -> IE 低版本: cancelBubble = true

  11. 阻止默认行为: 不让元素默认的行为出现

    -> 标准浏览器: preventDefault()

    -> IE 低版本: returnValue = false

  12. 事件委托: 把自己的事件委托给共同的结构父级

    -> 在父级的事件内, 通过事件目标判断来决定执行什么内容

  13. 事件对象: 当事件触发的时候, 浏览器提供的一个对象数据类型

    -> 里面记录着本次事件的所有相关信息

    -> 标准浏览器: 形参的方式

    -> IE 低版本: window.event

兼容性:

  1. DOM2级事件绑定

    -> 标准浏览器: 事件源.addEventListener('事件类型', 事件处理函数)

    -> IE 低版本: 事件源.attachEvent('on事件类型', 事件处理函数)

  2. DOM2级事件解绑

    -> 标准浏览器: 事件源.removeEventListener('事件类型', 事件处理函数)

    -> IE 低版本: 事件源.detachEvent('on事件类型', 事件处理函数)

  3. 事件对象的获取

    -> 标准浏览器: 形参方式接受

    -> IE 低版本: window.event

  4. 事件对象中的键盘编码

    -> 标准浏览器: 事件对象.keyCode

    -> FIreFox < 20: 事件对象.which

  5. 事件目标的兼容:

    -> 标准浏览器: 事件对象.target

    -> IE 低版本: 事件对象.srcElement

  6. 阻止事件传播:

    -> 标准浏览器: 事件对象.stopPropagation()

    -> IE 低版本: 事件对象.cancelBubble = true

  7. 阻止默认行为:

    -> 标准浏览器: 事件对象.preventDefault()

    -> IE 低版本: 事件对象.returnValue = false