JavaScript事件

事件分类

鼠标事件{
  onclick:鼠标点击触发,
  oncontextmenu:鼠标右键时触发,
  ondbclick:双击触发,

  onmouseup:鼠标抬起时触发,
  onmousedown:鼠标按钮下触发，只有鼠标中键或左键按下才会被触发,

  onmousemouve:鼠标移动时触发,

/*不支持冒泡*/
  onmouseenter:鼠标移动到元素上时触发,不支持冒泡,
  onmouseleave:鼠标移除元素时触发,不支持冒泡,

/*支持冒泡*/
  onmouseover:鼠标移动到元素上触发,
  onmouseout:鼠标移出元素时触发,
}

键盘事件{
 onkeydown:键盘按下触发事件,
 onkeyup:键盘抬起触发事件,
 onkeypress:键盘按下松开时触发事件

滚轮事件
  onwheel:鼠标在元素上滚动时触发
}
框架事件
表单时间
剪切板事件
打印事件
拖动事件
多媒体事件
动画事件
过渡动画事件
其他事件

事件的绑定方法

通过标签绑定事件

通过标签节点直接绑定
<div @click="xxx()">点击触发</div>
注意
  1.通过向标签直接绑定事件的方法，函数内部的this指向window
  
  2.如果想要改变this，让其指向触发的事件，可以传入this
    <div @click="xxx(this)">点击触发</div>
  3.指定函数时必须带括号指定

通过js获取DOM元素绑定事件

  <div>点击事件</div>
  let DIV=document.querySelector('div')
  DIV.onclick=click
注意
    1.如果函数需要接收到ev，可以传入ev，此时可以获取事件执行的相应属性
    DIV.onclick=click(ev)
注意
  1.通过这个方式绑定的函数只能绑定一个

通过addEventListener属性设置事件

 dom.addEventListener(事件函数,false)
  参数1：事件函数
  参数2：触发时期，false冒泡出发，true捕获触发