🌈个人主页：前端青山
🔥系列专栏：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键按下并保持的情况。
