深入了解JavaScript事件绑定：实现高效可靠的事件处理
🌈个人主页：前端青山
🔥系列专栏：JavaScript篇
🔖人终将被年少不可得之物困其一生
依旧青山,本期给大家带来JavaScript篇专栏内容:JavaScript-事件绑定方式
目录
事件绑定方式
什么是事件
DOM0级 事件
DOM0级事件绑定
DOM2级 事件绑定
事件解绑方式
DOM0级事件解绑
DOM2级事件解绑
事件对象的认识
什么是事件对象？（类似于飞机上的黑匣子、汽车上的行车记录仪、教室中的摄像头)
如何获取事件对象？
事件对象内鼠标相关信息
鼠标的相对坐标值：（鼠标相对于所在对象上的坐标值）
鼠标的可视区坐标值：（当前鼠标触发点距离当前窗口左上角的X/Y坐标）
鼠标的绝对坐标值：（当前鼠标触发点距离BODY左上角的X/Y坐标(IE9以下没有这两个属性)
事件对象内键盘相关信息
altKey / shiftKey / ctrlKey / metakey
事件绑定方式
什么是事件
-
一个事件由什么东西组成
-
触发谁的事件：事件源
-
触发什么事件：事件类型
-
触发以后做什么：事件处理函数
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级 事件
-
常用事件
-
onblur : 失焦事件
-
onfocus : 得焦事件
-
onchange : 内容改变事件
-
-
鼠标常用事件
-
onclick : 点击事件
-
ondblclick : 双击事件
-
onmousedown : 鼠标按下事件
-
onmouseup : 鼠标抬起事件
-
onmouseenter : 鼠标移入事件
-
onmouseleave : 鼠标移出事件
-
onmouseover : 鼠标移入事件
-
onmouseout ： 鼠标移出事件
-
onmousemove ： 鼠标移动事件
-
-
键盘常用事件
-
onkeydown : 键盘按下
-
onkeyup : 键盘抬起
-
onkeypress : 键盘按过（按下时触发）
-
-
其它事件
-
onload : 加载成功事件
-
error : 加载失败事件
-
resize : 大小改变事件
-
<script>
//1. 获取元素对象
var txt = document.querySelector('input');
var box = document.querySelector('#box');
//2. 添加事件
txt.onfocus = function(){
this.value = ''; //清空当前文本框
}
txt.onblur = function(){
alert('失焦后：' + this.value);
}
txt.onblur = null;
txt.onchange = function(){
alert('改变后：' + this.value);
}
txt.oninput = function(){
box.innerText = this.value;
}
box.onclick = function(){
console.log('点击了div');
}
box.ondblclick = function(){
console.log('双击了div')
}
box.onmousedown = function(){
console.log('鼠标在div上按下');
}
box.onmouseup = function(){
console.log('鼠标在div上抬起');
}
box.onmouseover = function(){
console.log('over:','鼠标移入了div中');
}
box.onmouseout = function(){
console.log('out:' + '鼠标移出了div');
}
box.onmouseenter = function(){
console.log('enter:' + '鼠标移入了div');
}
box.onmouseleave = function(){
console.log('leave:鼠标移出了div');
}
box.onmousemove = function(){
console.log('鼠标在div上移动');
}
document.onkeydown = function(){
console.log('按下键盘');
}
document.onkeyup = function(){
console.log('抬起键盘')
}
document.onkeypress = function(){
console.log('按过键盘');
}
</script>DOM0级事件绑定
ele.onclick = function(){}
DOM2级 事件绑定
标准 浏览器： ele.addEventListener('click',function(){},false)
IE 浏览器 ：ele.attachEvent('onclick',function(){})
<script>
//1. 获取元素
var box = document.querySelector('#box');
function fn1(){
alert('开灯');
}
function fn2(){
alert('开空调');
}
function fn3(){
alert('开热水器');
}
2. 绑定事件
box.onclick = fn1;
box.onclick = fn2;
box.onclick = fn3;
标准浏览器添加事件监听器
1. 第一个参数：事件类型
2. 第二个参数：事件处理程序
3. 第三个参数：是否进行捕获 false(默认) : 冒泡 true(捕获)
box.addEventListener('click',fn1,false);
box.addEventListener('click',fn2,false);
box.addEventListener('click',fn3,false);
IE浏览器添加事件监听器
1. 第一个参数：事件驱动
2. 第二个参数：事件处理程序
box.attachEvent('onclick',fn1);
box.attachEvent('onclick',fn2);
box.attachEvent('onclick',fn3);
兼容
function addEventListener(dom,type,fn,bool){
//1. 处理默认参数的问题
bool = bool || false;
//2. 是否支持addEventListener方法
if(dom.addEventListener){
dom.addEventListener(type,fn,bool);
}else if(dom.attachEvent){
dom.attachEvent('on' + type,fn);
}
}
addEventListener(box,'click',fn1);
addEventListener(box,'click',fn2);
addEventListener(box,'click',fn3);
//标准浏览器移除事件监听器
// box.removeEventListener('click',fn2,false);
//IE浏览器移除事件监听器
// box.detachEvent('onclick',fn2);
function removeEventListener(dom,type,fn,bool){
//1. 处理默认参数的问题
bool = bool || false;
//2. 是否支持addEventListener方法
if(dom.removeEventListener){
dom.removeEventListener(type,fn,bool);
}else if(dom.detachEvent){
dom.detachEvent('on' + type,fn);
}
}
removeEventListener(box,'click',fn2);
</script>//添加事件监听器
//标准浏览器
//第一个参数：事件类型 （名词）
//第二个参数：事件处理程序
//第三个参数：是否进行事件捕获？ 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)
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);
}
}事件对象的认识
什么是事件对象？（类似于飞机上的黑匣子、汽车上的行车记录仪、教室中的摄像头)
当绑定事件的对象，在触发事件时，所发生的事情记录在一个地方，而这个地方称为事件对象。
如何获取事件对象？
-
标准浏览器获取事件对象的方式： 触发事件后，会自动给事件处理程序传递一个参数，这个参数就是事件对象。
-
IE浏览器获取事件对象的方式： window.event
-
兼容：
-
arguments : 内置的对象,是一个伪数组,是实参副本.
function getEvent(){ return arguments[0] || window.event; }
事件对象内鼠标相关信息
鼠标的相对坐标值：（鼠标相对于所在对象上的坐标值）
-
event.offsetX / event.offsetY
鼠标的可视区坐标值：（当前鼠标触发点距离当前窗口左上角的X/Y坐标）
-
event.clientX / event.clientY
鼠标的绝对坐标值：（当前鼠标触发点距离BODY左上角的X/Y坐标(IE9以下没有这两个属性)
//兼容处理：
event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)
event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)事件对象内键盘相关信息
-
onkeydown/onkeyup : event.keyCode
监听整个键盘，其中字母键只返回大写的编码值。
-
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
-
event.metaKey : 返回一个布尔值标识meta键(windows键)是否被按键并被保持。
返回true表示meta键按下并保持
返回false表示没有满足meta键按下并保持的情况。