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

事件

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

事件的类型

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

• 依赖于设备的输入事件：键盘事件和鼠标事件，这些事件都是直接和设备相关的
• 独立于设备的输入事件：例如click事件等，这些事件并没有直接与设备相关
• 用户界面的相关事件：用户界面事件较高级的事件，一般多用于表单中的组件
• 状态变化的相关事件：这些事件与用户行为无关，而是网络或浏览器触发的
• 特定API事件：这些事件多用于特定场景的实现，例如HTML5中提供的拖放API中的事件等
• 与错误处理的相关事件

注册事件

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

• HTML页面元素提供的事件属性
• DOM标准规范中HTML相关对象提供的事件属性
• 通过向HTML页面中指定元素添加事件监听器

绑定事件

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

HTML代码:

<button id='btn' onclike='myClick()'>点击一下</button>

JavaScript代码：

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

• 在JavaScript绑定事件

HTML代码

   <button id='btn'>点击一下</button>

JavaScript代码

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

• 用addEventListener(eventName,callback)

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

<button class='btn'>点击</button>

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);
        });
    }
}

移除注册事件以及事件对象Event的用法

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

HTML代码

    <button id='d1'>按钮</button>

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代码

<button id='btn'>按钮</button>

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码