【Java script基础学习】关于事件

一、事件

1. 事件概念：行为，通过某种动作触发才能执行的功能
2. 事件分类：行为类型
   • 鼠标类
   • 键盘类
   • 表单类
   • 浏览器类
3. 事件绑定
   • 赋值式绑定：事件源.on事件类型 = 事件处理函数
   • 监听式绑定…
4. 事件源：绑定事件的元素
   • 绝对可以通过this关键字获取
5. 事件目标：触发事件的元素
   • 绝对可以通过event.target获取
6. 事件处理函数：当触发对应事件时，要执行的功能

二、事件对象

1. 事件对象的概念：用来记录事件发生时产生的相关信息。（如鼠标坐标，键盘的键码等等等）
2. 事件对象的获取 - 必须在事件处理函数内部才能获取
   • 正常浏览器：接收形参：事件处理函数的第一个形参，默认就是事件对象
   • 低版本IE：通过window获取，在事件处理函数内部，通过window的内置属性event获取
     • window.event

   // 获取事件对象的兼容处理
   document.onclick = function(eve){
       var e = eve ? eve : window.event;
       console.log(e);
   }
   

3. 事件对象的特点
   • 事件对象是由浏览器分配
   • 只有在事件发生时才被分配
   • 事件结束后，事件对象被浏览器回收
   • 事件发生必然会执行事件处理函数，所以事件对象只能在事件处理函数内获取

三、鼠标事件对象的常见属性

1. 事件类型：
   • e.type
2. 获取按键：
   • e.button
   • e.buttons
3. 获取事件目标：
   • 正常浏览器：e.target
   • IE低版本浏览器：e.srcElement
   • 借助三目运算符处理兼容
4. 鼠标相对于事件目标的坐标
   • e.offsetX
   • e.offsetY
5. 鼠标相对于浏览器可视区域的坐标
   • e.clientX
   • e.clientY
6. 鼠标相对于页面的坐标
   • e.pageX
   • e.pageY
7. 鼠标相对于显示器屏幕的坐标
   • e.screenX
   • e.screenY

三、键盘事件对象的常见属性

1. 键码
   • e.keyCode
   • e.which
   • 键码的兼容

     document.onclick = function(eve){
       var code = e.keyCode ? e.keyCode : e.which;
       console.log(code);
   }
   

2. 功能按键：
   • ctrl或control：e.ctrlKey
   • shift：e.shiftKey
   • alt或option：e.altKey
   • win或command：e.metaKey
3. 常见的键码
   • 回车：13
   • 空格：32
   • 上：38
   • 下：40
   • 左：37
   • 右：39
   • A-Z：65~90 (键盘按键)
   • win或command:91 (mac:command)
   • ctrl:17 （mac:control）
   • alt:18 (mac:option)

四、默认事件

1. 默认事件：非开发者自定义，由浏览器默认提供的行为。
2. 阻止默认：
   • 正常：e.preventDefault();
   • IE低版本：e.returnValue = false;

   // 阻止默认事件的兼容封装
   function stopDefault(e){
       if(e.preventDefault){
           e.preventDefault();
       }else{
           e.returnValue = false;
       }
   }