JS-part8.5-元素的常用事件

事件

事件的定义

+ 在页面中所做事情的描述

+ 一个项目里会有多个事件，但只有触发了的事件才会被执行。

+ 实现: 函数和元素结合
  => 当我在页面的某一个元素上触发行为的时候,执行某一个函数
  => 该页面元素的id名,可以直接当作一个变量来使用.

+ 例如:在页面载入完毕时，将触发onload事件；当用户单击按钮时，将触发按钮的onclick事件等。
  => on 是绑定事件的一种方式
  => load 和 click 是鼠标事件类型

常见的事件

元素的常用事件:
+ 在 JS 里面，事件分为几个大类
  1. 鼠标事件
  2. 键盘事件
  3. 浏览器事件
  4. 表单事件
  5. 拖拽事件
  6. 触摸事件(移动端)
  7. 其他事件

+ JS 里面的所有原生事件没有大写字母

鼠标事件类型

1. click => 鼠标左键单击
2. dblclick => 鼠标左键双击
3. contextmenu => 鼠标右键单击
4. mousewheel => 滚轮事件
5. mousedown => 鼠标按下
  -> 不分 左右键 和 滚轮键 和 功能键
6. mouseup => 鼠标释放
7. mousemove => 鼠标移动
8. mouseover => 鼠标移入
9. mouseout => 鼠标移出
10. mouseenter => 鼠标移入
11. mouseleave => 鼠标移出
12. ...

*{
   
     margin: 0;
     padding: 0;
 }

 div{
   
     width: 500px;
     height: 500px;
     background-color: skyblue;
 }
 
<div draggable="true"></div>

// 1. 鼠标事件
// 1-1. click
div.onclick = function(){
   console.log('左键单击')}
// 1-2. dblclick
div.ondblclick = function(){
   console.log('左键双击')}
// 1-3. contextmenu
div.oncontextmenu = function(){
   console.log('右键单击')}
// 1-4. mousewheel
div.onmousewheel = function(){
   console.log('滚轮滚动')}
// 1-5. mousedown
div.onmousedown = function(){
   console.log('鼠标按下')}
// 1-6. mouseup
div.onmouseup = function(){
   console.log('鼠标释放')}
// 1-7. mousemove
div.onmousemove =