事件
事件就是浏览器告知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);
});
}
}移除注册事件以及事件对象Event的用法
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码