javascript 事件

事件:

• 事件的三要素：

  1. 事件源 事件被触发的对象 谁被触发
  2. 事件类型 如何触发 什么事件 比如鼠标点击（onclick），鼠标经过，键盘按下
  3. 事件处理程序 通过 一个函数赋值的方式 完成

• 常用事件类型：鼠标、键盘、表单、change

• form的formData

• 事件对象 event 兼容性写法

  • Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！

    当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细信息（包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息等。这个对象是在执行事件时，浏览器通过函数传递过来的。）都会被临时保存到一个指定的地方——event对象，供我们在需要的时候调用.

• 事件流 阻止冒泡——兼容性写法

  • 防止冒泡和捕获：w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

    stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。什么是冒泡事件？如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发 。stopPropagation就是阻止目标元素的事件冒泡到父级元素

• 阻止默认行为 兼容性写法：return false

  • JavaScript的return false只会阻止默认行为，而是用jQuery的话则既阻止默认行为又防止对象冒泡。

  • 取消默认事件：w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;

    preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。什么元素有默认行为呢？如链接<a>，提交按钮<input type=“submit”>等。

• 事件委托：将多个子元素的相同事件，绑定给页面上现存的共同的父元素
  利用事件冒泡触发父元素的事件，利用事件目标找到真正点击的元素

• 鼠标事件：

  • 元素的onclick 标签属性

  • 页面js对象.οnclick=function(){}

  • addEventListener() 方法 【官方推荐】removeEventListener移除

  • ie9之前 attachEvent() detachEvent()移除

  • 鼠标事件：

    • click
    • dblclick 短时双击同一个元素触发
    • mouseover/out 鼠标移入/移出
    • mouseenter/leave 鼠标移进/离开
    • mousedown/up 鼠标按下/释放
    • mousemove 鼠标移动
    • 右键：contextmenu

• 键盘事件：

  • keydown 按键向下按的时候触发
  • keyup 按键回弹的时候触发
  • keypress 按键触底的时候触发

• 表单事件：

  • 失去焦点 blur
  • 获取焦点 focus
  • submit 提交事件
  • change 数据发生改变会触发的事件

• 拖拽事件

  • ondragstart 开始拖拽
  • ondrag 正在拖拽,仅在窗口内有效
  • ondragend 结束拖拽
  • 以上三个事件绑定的是被拖拽的元素
  • 以下三个事件绑定的是元素拖拽的范围
  • ondragenter 有一个标签被拖入到事件范围内
  • ondragover 有一个标签在事件范围内,持续触发事件
  • ondragleave 有一个标签被拖出了事件范围

总结：

防止冒泡和捕获：w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

阻止默认行为：return false

取消默认事件：w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;