​🌈个人主页：前端青山
🔥系列专栏：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级 事件

1. 常用事件

   1. onblur : 失焦事件

   2. onfocus : 得焦事件

   3. onchange : 内容改变事件

2. 鼠标常用事件

   1. onclick : 点击事件

   2. ondblclick : 双击事件

   3. onmousedown : 鼠标按下事件

   4. onmouseup : 鼠标抬起事件

   5. onmouseenter : 鼠标移入事件

   6. onmouseleave : 鼠标移出事件

   7. onmouseover : 鼠标移入事件

   8. onmouseout ： 鼠标移出事件

   9. onmousemove ： 鼠标移动事件

3. 键盘常用事件

   1. onkeydown : 键盘按下

   2. onkeyup : 键盘抬起

   3. onkeypress : 键盘按过（按下时触发）

4. 其它事件

   1. onload : 加载成功事件

   2. error : 加载失败事件

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

事件对象的认识

什么是事件对象？（类似于飞机上的黑匣子、汽车上的行车记录仪、教室中的摄像头)

当绑定事件的对象，在触发事件时，所发生的事情记录在一个地方，而这个地方称为事件对象。

如何获取事件对象？

1. 标准浏览器获取事件对象的方式： 触发事件后，会自动给事件处理程序传递一个参数，这个参数就是事件对象。

2. IE浏览器获取事件对象的方式： window.event

3. 兼容：

4. arguments : 内置的对象,是一个伪数组,是实参副本.

   function getEvent(){return arguments[0] || window.event;
   }

事件对象内鼠标相关信息

鼠标的相对坐标值：（鼠标相对于所在对象上的坐标值）

1. event.offsetX / event.offsetY

鼠标的可视区坐标值：（当前鼠标触发点距离当前窗口左上角的X/Y坐标）

1. event.clientX / event.clientY

鼠标的绝对坐标值：（当前鼠标触发点距离BODY左上角的X/Y坐标(IE9以下没有这两个属性)

//兼容处理：
event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)
event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)

事件对象内键盘相关信息

1. onkeydown/onkeyup : event.keyCode

监听整个键盘，其中字母键只返回大写的编码值。

1. 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

1. event.metaKey : 返回一个布尔值标识meta键(windows键)是否被按键并被保持。

返回true表示meta键按下并保持

返回false表示没有满足meta键按下并保持的情况。