事件绑定方式

什么是事件

• 一个事件由什么东西组成

• 触发谁的事件：事件源
  
• 触发什么事件：事件类型
  
• 触发以后做什么：事件处理函数

var oDiv = document.querySelector('div')
​
oDiv.onclick = function () {}
// 谁来触发事件 => oDiv => 这个事件的事件源就是 oDiv
// 触发什么事件 => onclick => 这个事件类型就是 click
// 触发之后做什么 => function () {} => 这个事件的处理函数

我们想要在点击 div 以后做什么事情，就把我们要做的事情写在事件处理函数里面

var oDiv = document.querySelector('div')
​
oDiv.onclick = function () {
  console.log('你点击了 div')
}

• 当我们点击 div 的时候，就会执行事件处理函数内部的代码
  
• 每点击一次，就会执行一次事件处理函数
  

DOM0级 事件

页面事件

1. 页面事件 onload ： 加载事件 onresize ：浏览器大小发生变化时触发 onscroll ：滚动事件（滚动条）

2. 表单事件 onfocus :

得焦事件 onblur:

失焦事件 onchange :

内容改变事件 oninput:

输入事件 onsubmit:

3. 鼠标事件 onclick :

单击事件 ondblclick:

双击事件 onmousedown:

鼠标按下事件 onmouseup :

鼠标抬起事件 onmouseover:

鼠标移入事件 onmouseout:

鼠标移出事件 onmouseenter:

鼠标移入事件 onmouseleave:

鼠标移出事件 onmousemove:

4. 键盘事件 onkeydown:

键盘按下事件 onkeyup:

键盘抬起事件 onkeypress:

1. 常用事件

1. onblur : 失焦事件
   
2. onfocus : 得焦事件
   
3. onchange : 内容改
   

1. 变事件
   

1. 鼠标常用事件

1. onclick : 点击事件
   
2. ondblclick : 双击事件
   
3. onmousedown : 鼠标按下事件
   
4. onmouseup : 鼠标抬起
   

1. 事件
   
2. onmouseenter : 鼠标移入事件
   
3. onmouseleave : 鼠标移出事件
   
4. onmouseover : 鼠标移入事件
   
5. onmouseout ： 鼠标移
   

1. 出事件
   
2. onmousemove ： 鼠标移动事件
   

1. 键盘常用事件

1. onkeydown : 键盘按下
   
2. onkeyup : 键盘抬起
   
3. onkeypress : 键盘按过（按下时触发）
   

1. 其它事件

1. onload : 加载成功事件
   
2. error : 加载失败事件
   
3. resize : 大小改变事件
   

DOM0级事件绑定

ele.onclick = function(){}

DOM2级 事件绑定

标准 浏览器： ele.addEventListener('click',function(){},false)

IE 浏览器 ：ele.attachEvent('onclick',function(){})

//添加事件监听器
//标准浏览器
//第一个参数：事件类型 （名词）
//第二个参数：事件处理程序
//第三个参数：是否进行事件捕获？ false(冒泡-默认值) true(捕获)
// o_btn.addEventListener('click',fn1,false);
// o_btn.addEventListener('click',fn2,false);
// o_btn.addEventListener('click',fn3,false);
//IE浏览器
// o_btn.attachEvent('onclick',fn1);
// o_btn.attachEvent('onclick',fn2);
// o_btn.attachEvent('onclick',fn3);
//兼容
function addEventListener(obj,type,fn,bool){
    //初始化bool参数
    bool = bool || false;
    if(obj.addEventListener){
        obj.addEventListener(type,fn,bool);
    }else if(obj.attachEvent){
        obj.attachEvent('on' + type,fn);
    }
}

事件解绑方式

DOM0级事件解绑

ele.onclick = null;

DOM2级事件解绑

标准 浏览器： ele.removeEventListener('click',function(){},false)

DOM2级事件解绑

标准 浏览器： ele.removeEventListener('click',function(){},false)

IE 浏览器 ：ele.detachEvent('onclick',function(){})

//移除事件监听
//标准浏览器
// o_btn.removeEventListener('click',fn2,false);
//IE浏览器
// o_btn.detachEvent('onclick',fn2);
//兼容
function removeEventListener(obj,type,fn,bool){
    //初始化bool参数
    bool = bool || false;
    if(obj.removeEventListener){
        obj.removeEventListener(type,fn,bool);
    }else if(obj.detachEvent){
        obj.detachEvent('on' + type,fn);
    }
}

事件对象的认识

什么是事件对象？（类似于飞机上的黑匣子、汽车上的行车记录仪、教室中的摄像头)

当绑定事件的对象，在触发事件时，所发生的事情记录在一个地方，而这个地方称为事件对象。

如何获取事件对象？

1. 标准浏览器获取事件对象的方式： 触发事件后，会自动给事件处理程序传递一个参数，这个参数就是事件对象。
   
2. IE浏览器获取事件对象的方式： window.event
   

1. 兼容：

function getEvent(){

   return arguments[0] || window.event;

}

事件对象内鼠标相关信息

鼠标的相对坐标值：（鼠标相对于所在对象上的坐标值）

1. event.offsetX / event.offsetY
   

鼠标的可视区坐标值：（当前鼠标触发点距离当前窗口左上角的X/Y坐标）

1. event.clientX / event.clientY
   

鼠标的绝对坐标值：（当前鼠标触发点距离BODY左上角的X/Y坐标(IE9以下没有这两个属性)

1. event.pageX / event.pageY

//兼容处理：
event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)
event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)

事件对象内键盘相关信息

1. onkeydown/onkeyup : event.keyCode
   

监听整个键盘，其中字母键只返回大写的编码值。

1. onkeypress : event.keyCode || event.charCode || event.which
   

监听编辑键区，字母键返回大小的编码值。 低版本浏览器中有可能监听功能键区、回车键出现过10 兼容：

//7. 获取键盘编码值的兼容
function getKeyCode(evt){
    var e = evt || window.event;
    return e.keyCode || e.charCode || e.which;
}

altKey / shiftKey / ctrlKey / metakey

1. event.metaKey : 返回一个布尔值标识metta键(windows键)是否被按键并被保持。
   

返回true表示meta键按下并保持

返回false表示没有满足meta键按下并保持的情况。