聊聊DOM中很重要的一个知识点：事件

摘要：事件事件就是浏览器告知程序，用户的行为，用户点击了页面中的某个按钮或者用户输入用户名或密码等操作可以称为事件事件的类型事件根据使用的场景不同，可以分为如下几种依赖于设备的输入事件键盘事件和鼠标事件，这些事件都是直接和设备相关的独立于设备的输

事件就是浏览器告知JavaScript程序，用户的行为，用户点击了HTML页面中的某个按钮或者用户输入用户名或密码等操作可以称为事件

事件根据使用的场景不同，可以分为如下几种：

依赖于设备的输入事件：键盘事件和鼠标事件，这些事件都是直接和设备相关的

独立于设备的输入事件：例如click事件等，这些事件并没有直接与设备相关

用户界面的相关事件：用户界面事件较高级的事件，一般多用于表单中的组件

状态变化的相关事件：这些事件与用户行为无关，而是网络或浏览器触发的

特定API事件：这些事件多用于特定场景的实现，例如HTML5中提供的拖放API中的事件等

与错误处理的相关事件

注册事件，就是将JavaScript函数与指定事件相关联，被绑定的函数成为该事件的句柄，事件被触发时，绑定的函数会被调用
注册事件具有以下三种方式实现：

HTML页面元素提供的事件属性

DOM标准规范中HTML相关对象提供的事件属性

通过向HTML页面中指定元素添加事件监听器

HTML页面与JavaScript相结合实现的事件绑定,缺点是没有实现HTM与JavaScript的分离

HTML代码:

点击一下

JavaScript代码：

var btn=document.getElementById("btn");
function myClick(){
    console.log("this is event");
}

在JavaScript绑定事件

HTML代码

   点击一下

JavaScript代码

var btn=document.getElementById("btn");
btn.onclick=function(){
    console.log("this is event");
}

用addEventListener(eventName,callback)

参数：
eventName:表示绑定的事件名称，注意没有on
callback:表示事件的处理函数(回调函数)
允许为相同元素绑定相同事件多次
html代码

点击

JavaScript代码

var btn=document.getElementsByClassName("btn")[0];
btn.addEventListener("click",function(){
    console.log("this is event");
});

关于事件监听器中的this：
当使用addEventListener()方法为某个HTML页面元素注册事件的时候，this就指代注册事件的元素
当使用attachEvent()方法为某个HTML页面元素注册事件的时候，this指代的是window对象，而不是注册事件的元素
由于addEventListener()方法中的this与attachEvent()方法中的this的含义不同，我们需要将监听器的浏览器兼容方案进行优化

//对于IE 8以下版本的this优化
function bind(elem,event,callback){
    //判断是否存在 addEventListener
    if(elem.addEventListener){
        elem.addEventListener(event,callback,false);
    }else{
        elem.attachEvent("on"+event,function(){
            //将this的指向修改为注册事件的元素
            callback.call(elem);
        });
    }
}

removeEventListener(eventName,functionName)方法
参数:
eventName:表示移除的事件名称
functionName:表示事件的处理函数
必须是注册事件的处理函数(同一个函数)

HTML代码

    按钮

JavaScript代码

var btn=document.getElementById("d1");
function myClick(){
    console.log("this is event");
}
btn.addEventListener("click",myClick);
//元素.removeEventListener(事件名称,处理函数);
btn.removeEventListener("click",myClick);

/*IE 8以下版本浏览器不支持removeEventListener()方法
detachEvent(eventName,functionName)
eventName:表示移除的事件名称(必须有on)
functionName:表示事件的处理函数
必须是注册事件时处理函数(同一个函数)*/

事件对象是作为window对象的属性出现
事件对象：事件的处理函数中接收一个参数
Event事件对象：作为所有事件对象的父级
1.MouseEvent事件对象：表示鼠标事件
2.KeyboardEvent事件对象：表示键盘事件
3.TouchEvent事件对象：表示触摸事件

IE 8以下版本浏览器提供的添加事件监听器方法：事件对象是作为window对象的属性出现：window.event

html代码

按钮

JavaScript代码

var btn=document.getElementById("btn");
//第一种方法：元素.addEventListener(事件名,function(事件对象Event){});
btn.addEventListener("click",function(event){
    //获取目标元素
    var btn=event.target;
    //阻止默认行为
    event.preventDefault();
})

//第二钟方法：元素名.onclick=function(事件对象Event)
btn.onclick=function(event){
//关于IE 8的阻止默认行为的方法与其他浏览器不同
     var e=event || window.event;
     //IE 8以下的阻止默认行为
     e.returnValue=false;
}

以下只能获取，不能设置

pageX,pageY:鼠标坐标值相对于当前HTML页面

clientX,clientY:鼠标坐标值相对于当前可视窗口

screenX,screenY:鼠标坐标值相对于当前屏幕的

CSS代码

//为了测试鼠标坐标值，直接把body的高度设置2000像素
body{height:2000px}

JavaScript代码

var html=document.documentElement;
html.addEventListener("click",function(event){
    //鼠标坐标值相对于当前HTML页面
    console.log(event.pageX,event.pageY);
    //鼠标坐标值相对于当前可视区域
    console.log(event.clientX,event.clientY);
    //鼠标坐标值相对于当前屏幕的
    console.log(event.screenX,event.screenY);
});

click事件：表示鼠标点击事件(鼠标左键)
mousedown事件:表示鼠标按键被按下事件
mouseup事件:表示鼠标按键被释放事件
event事件对象提供了button属性
作用：用于表示鼠标按键
值：0 - 表示鼠标左键

1 - 表示鼠标滚轮
2 - 表示鼠标右键

keydown事件：表示键盘按键被按下
keyup事件：表示键盘按键被释放
keypress事件：表示键盘按键按一下

event事件对象
code：获取当前按键的名称
key：获取当前按键的名称
keyCode：获取当前按键对应的Unicode码