JS事件

事件：由访问WEB页面的用户引起的一系列操作
处理事件函数（事件句柄） on+事件名 = 函数体（函数名）
事件的分类：鼠标事件 键盘事件 HTML事件

鼠标事件

onclick 单击
onmousedown 鼠标按下
onmouseup 鼠标释放
onmouseover 鼠标移入
onmouseout 鼠标移出
onmousemove 鼠标移动
ondblclick 双击
onmouseenter 鼠标移入 无冒泡
onmouseleave 鼠标移出 无冒泡

HTML事件

window.onload 页面加载完毕
onselect 选中内容触发
onchange 内容改变并失去焦点
onfocus 获取焦点
onblur 失去焦点
onsubmit
onreset

键盘事件

onkeydown 按下（所有按键）
onkeypress 按下（有输出内容的按键 例：a、b、！、#、1、2…）
onkeyup 释放

事件对象

事件对象：事件触发时，在事件处理函数中的第一个参数就是事件对象

document.onclick = function(){
   console.log(e);   //在现代浏览器中可以直接通过参数获取事件对象
   window.event     //针对IE浏览器
   var evt = e || window.event;
   console.log(evt);
}

鼠标位置

clientX、clientY属性
鼠标在可视区X坐标和Y坐标，即距离左边框和上边框的距离
screenX、screenY属性
鼠标在屏幕区X坐标和Y坐标，即距离左屏幕和上屏幕的距离
offsetX、offsetY属性
鼠标相对于事件源的X坐标和Y坐标
pageX、pageY属性
鼠标相对于文档的X坐标和Y坐标

判断鼠标哪个按键被点击

document.onclick = function(){
   var evt = e||event;
   var mouseNum = evt.button;
   if(mouseNum==0){
      document.innerText = "鼠标左键点击";
      }else if(mouseNum==1){
            document.innerText  = "鼠标中键点击";
      }else {
          document.innerText = "鼠标右键点击";
      }
    console.log(evt.button);   //左键0  中键1   右键2
}

事件流

事件流:事件的传播顺序
捕获:事件由最不特定的目标到最特定的目标的一个传播过程
冒泡:事件由最特定的目标到最不特定的目标的一个传播过程
事件源：直接触发某个事件的DOM对象

var evt = e || event;
console.log(evt.target || evt.srcElement);  //获取事件源

阻止事件冒泡

evt.stopPropagation();   //针对现代浏览器
evt.cancleBubble = ture;  //最初事针对于IE
if(evt.stopPropagation){
    evt.stopPropagation;
}else{
    evt.cancelBubble = ture;
}

默认行为

默认行为：例如点击a标签跳转
阻止默认行为

evt.preventDefault();      //现代浏览器  不兼容IE低版本
evt.returnValue = false;;  //针对IE 但现在很多浏览器也支持
return false;              //兼容性最好

DOM2级事件处理程序

添加事件监听器:addEventListener(事件名，处理函数，布尔值)
移除事件监听器:removeEventListener(事件名，处理函数)
注意：事件名不带on，处理函数为函数指针，布尔值代表冒泡或捕获
IE下的事件监听器：attachEvent(事件名，处理函数),detachEvent(事件名，处理函数)

事件委托

事件委托:利用事件冒泡的原理，把本应该添加到某个DOM对象上的事件，委托给其父级
主要目的：给新增的元素添加相同的事件
减少事件添加次数，减少DOM操作