js事件总结

事件的定义：
事件就是给浏览器定义一个预处理函数，当事件触发的时候执行函数。
事件的写法：
W3C标准：事件写在行内。但是因为结构和行为要分离，一般用javascript的方法来绑定事件。只有在极少数的情况下。才将时间写在行内。
三中事件绑定方法：

1. 行内：一般不使用
   写法：
   <标签 on+事件句柄 = “function（）{}”></标签>

2. 给对象绑定事件 属于DOM0级事件处理，是一种赋值方式，被所有浏览器所支持
   写法;：浏览器节点（对象）.on+事件句柄 = fuction(){事件发生时要执行的代码}一般使用在一对一的事件
   

3. 给对象添加监听事件 属于DOM2级事件处理是所有DOM节点中的方法，可以重复监听，但是浏览器有兼容问题
   写法：
   写法：//DOM2级
   if(window.attachEvent){
   oDiv.attachEvent(“onclick”, function(){ … }); // IE只有冒泡阶段,所以没有第三个参数，而且需要加on；
   }else{
   oDiv.addEventListener( “click”, function(){ … },false); // false指冒泡阶段
   }
   
   事件分类
   鼠标事件：
   click，dblclick， mousedown，mouseup，mouseover，mouseout（在进入子元素的时候也会触发）, mouseenter mouseleave, scroll ， mousewheel（鼠标滚轮，contentmenu （鼠标右键）
   键盘事件：
   只有三种：keyup,keydown , keypress普通的对象不能调用
   表单事件：
   onchange：当表单发生改变时触发
   onsubmit：表单提交时触发
   oninput：input标签改变时触发
   
   注意：onchange事件和oninput事件的区别onchangge事件要在失去焦点时才触发，oninput只要改变就触发
   事件委托：
   定义：如果有多个元素需要同一个事件，不需要每个元素都来调用事件，用事件委托。
   原理：利用事件冒泡
   判断事件源： e.target || e.srcElement
   
   事件流：
   定义：当子级被触发事件时，父级也会被触发
   事件流的过程：捕获阶段（从document到事件源） 目标阶段 冒泡阶段（从事件源到父级到document）。
   一个完整事件包含 捕获阶段 —> 目标阶段 —>冒泡阶段
   
   阻止冒泡：
   e.stopPropagation( );
   e.cancelBubble=true;//兼容IE
   事件对象e
   鼠标事件对象e的常见属性：
   e.buttons：
   返回鼠标点击按键（1左键，2右键，4中键滚轮）
   e.offsetX / offsetY
   获取事件触发最近的盒子（事件源）的坐标
   e.clientX / clientY
   获取可视区的坐标（根据浏览器的定位）
   e.screenX / screenY
   获取整个屏幕的坐标
   e.screenX / screenY
   获取整个屏幕的坐标
   附坐标相关：
   1.浏览器的宽高
   Width:document.documentElement.clientWidth||document.body.clientWidth,
   height:document.documentElement.clientHeight||document.body.clientHeight

   2. 浏览器滚动条滚动高度
      Var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft

4. DOM尺寸
   box.style.width / box.style.height：内联
   box.clientWidth / box.clientHeight：不包含边框的宽高
   box.offsetWidth / box.offsetHeight：包含边框的宽高
   box.scrollWidth / box.scrollHeight：有滚动条的宽高

5. 位置
   box.clientLeft / box.clientTop：边框宽度
   box.offsetLeft / box.offsetTop：相对于有定位的父元素的高度和宽度，两边边框不计
   box.scrollTop / box.scrollLeft：滚动内容上方 超出显示区域的高度或宽度

6. 让滚动条在最底部
   box.scrollTop = box.scrollHeight - box.clientHeight
   
   键盘事件常见属性：
   e.keyCode：
   返回键盘对应的键码 有兼容问题
   var code = e.keyCode || e.which
   e.altKey/ ctrlKey/ shiftKey：
   ctrl alt shift键返回布尔值 可以做组合键盘事件
   e.target：
   返回事件源（即返回点击的最小元素） 有兼容问题 var target = e.target || e.srcElement;
   事件对象兼容问题：
   e的兼容问题：e = e || widow.event