day12——Javascript事件

JavaScript事件简介：

什么叫事件
  当我们点击一个按钮的时候，会弹出一个对话框。                                                                             在JavaScript中， “点击”这个事情就看作一个事件。“弹出对话框”其实就是我们在点击事件中做       的一些事。

事件应该有3部分
  事件源: 触发谁的事件
  事件类型:  这个事件是干啥的，是点击呢，还是移动呢
  事件处理函数: 事件过程做的一些事

事件对象event：

每触发一个事件都会生成事件对象

事件对象 包含对事件的描述信息
  你触发一个点击事件的时候，你点在哪个位置了，坐标是多少
  你触发一个键盘事件的时候，你按的是哪个按钮

获取事件对象
  在每一个事件处理函数的行参位置，默认第一个就是 事件对象
  IE兼容写法:                                                      

点击事件的光标坐标点获取：

每一个点击事件的坐标点都不是一对，因为要有一个相对的坐标系
  相对事件源（你点击的元素）
  相对页面
  相对浏览器窗口

1. 相对事件源（你点击的元素）offsetX,offsetY
  是相对于你点击的元素的边框内侧开始计算
  offsetX 和 offsetY                                   

 2. 相对于浏览器窗口(clientX,clientY)
  是相对于浏览器窗口来计算的，不管你页面滚动到什么情况，都是根据窗口来计算坐标
  clientX 和 clientY                                                

3. 相对于页面(pageX,pageY)
  是相对于整个页面的坐标点，不管有没有滚动，都是相对于页面拿到的坐标点
  pageX 和 pageY                                                   

常见的事件（了解）：

大致分为几类，浏览器事件 / 鼠标事件 / 键盘事件 / 表单事件 / 触摸事件                                          不需要都记住，但是大概要知道

浏览器事件                                                                                                                  

鼠标事件                                                                                                          

键盘事件                                                                                                                

表单事件                                                                                                         

触摸事件                                                                                                                 

 事件：

鼠标事件
  鼠标移入移出改变样式              
  案例-区块跟随光标移动                                     

  案例-拖拽元素 

 表单事件

表单提交事件onsubmit
  html
  js
  scss

表单提交项目中常用方式              

 内容转变事件onchange
  文件预览
  图片预览
  图片预览组件

焦点事件
  失去焦点onblur
  获取焦点onfocus
  案例-表单验证

键盘事件
  只给能在页面上选中的元素（表单元素） 和 document 来绑定键盘事件                                          注:不能给页面上一个 div 元素，设置键盘事件的        
  确定按键                                                                 
  常见的键盘码（了解）
   
  案例-回车事件                    
  组合按键