JavaScript 之事件（详解）

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

一、注册事件的三种方式

1、直接事件方式

语法格式 ：

变量名.on事件名 =  function() {}

注意：这种方式无法给同一对象的 同一事件 注册多个事件处理函数

2、addEventListener 方式（IE9 以后才支持）

语法格式 ：

变量名.addEventListener(事件名,function(){})

Demo :

  // 浏览器兼容性问题  IE9以后才支持

 btn.addEventListener('click', function () {

      alert('hello world');

 })

 btn.addEventListener('click', function () {

      alert('hello javascript');

 })

3、attachEvent 方式（IE老版本特有的方法 IE6-10坚持）

语法格式：

变量名.attachEvent(on事件名,function(){})

Demo :

  // 第一个参数，事件的名称前要加 on

 btn.attachEvent('onclick', function () {

      alert('hello world');

 });

 btn.attachEvent('onclick', function () {

      alert('hello javascript');

 });

由于以上的三种方式存在兼容问题，下面来封装一个函数来解决这个问题；

 // 处理注册事件的兼容性问题

 // element 事件源  eventName 事件名称   fn事件函数

     function addEventListener(element, eventName, fn) {

       // 判断当前浏览器是否支持addEventListener 方法

       if (element.addEventListener) {

         element.addEventListener(eventName, fn);  // 第三个参数 默认是false

       } else if (element.attachEvent) {

         element.attachEvent('on' + eventName, fn);

       } else {

         // 相当于 element.onclick = fn;

         element['on' + eventName] = fn;

       }

     }

二、移除事件的三种方式

1、直接事件方式移除事件

语法格式 ：

变量名.on事件名 = null;

Demo :

 btn.onclick = function () {

    alert('hello world);

    // 移除事件

    btn.onclick = null;

 }

2、addEventListener 移除事件

使用这种方式移除事件的时候，不能像注册的时候使用匿名函数了，其中提供了 removeEventLister() 的方法

语法格式 ：

变量名.removeEventListener(事件名, function)

Demo：

 // 声明一个函数

 function btnClick () {

       alert('hello world');

       // 移除事件

       btn.removeEventListener('click', btnClick);

 }

 btn.addEventListener('click', btnClick);

3、attachEvent 移除事件

使用这种方式移除事件的时候，也不能使用匿名函数，使用 detachEvent() 来移除事件.

语法格式 ：

变量名.detachEvent(on事件名，function)；

Demo：

  // chrome 中不支持attachEvent。 IE9-10

 function btnClick() {

      alert('hello world');

      // 移除事件

      btn.detachEvent('onclick', btnClick);

 }

 btn.attachEvent('onclick', btnClick);

由于以上的三种方式存在兼容问题，下面来封装一个函数来解决移除事件的问题：

 // 处理移除事件的兼容性处理

 function removeEventListener(element, eventName, fn) {

   if (element.removeEventListener) {

     element.removeEventListener(eventName, fn);

   } else if (element.detachEvent) {

     element.detachEvent('on' + eventName, fn);

   } else {

     element['on' + eventName] = null;

   }

 }

 // 给 btn 注册和移除事件

 function btnClick() {

       alert('hello');

       // 移除事件

      removeEventListener(btn, 'click', btnClick);

 }

 addEventListener(btn, 'click', btnClick);

三、事件的三个阶段

1、第一阶段：捕获阶段

2、第二阶段：执行当前事件的元素

3、第三阶段：冒泡阶段

on事件名只有事件冒泡阶段。

addEventListener 的第三个参数为 false 的时候：事件冒泡；为 true 的时候：事件捕获。

attachEvent 只有两个参数，只有事件冒泡。

通过 事件对象.eventPhase 属性可以查看事件触发时所处的阶段

4、事件冒泡的好处：事件委托

Demo：

 <ul id="ul">

     <li>西施</li>

     <li>貂蝉</li>

     <li>昭君</li>

     <li>凤姐</li>

     <li>芙蓉姐姐</li>

 </ul>

 <script>

     // 事件委托： 原理事件冒泡

     var ul = document.getElementById('ul');

     ul.onclick = function (e) {

       // e 事件参数（事件对象）: 当事件发生的时候，可以获取一些和事件相关的数据

       // 获取到当前点击的li

       // e.target 是真正触发事件的对象

       // console.log(e.target);

       // 让当前点击的li高亮显示

       e.target.style.backgroundColor = 'red';

     }

 </script>

上面的代码中，当点击 li 的时候，让其高亮显示，可以给所在 ul 注册单击事件，这是因为点击 li 的时候，会产生 事件冒泡 ，从而让 ul 也产生点击事件，在这个事件中通过 事件对象 event 可以获取 真正触发事件的对象 e.target。

四、事件对象

1、事件对象

事件对象，在存在事件函数里面的，并不是我们传递的参数，而是系统自带的一个对象。

通过事件对象，可以获取事件发生的时候和事件相关的一些数据。

2、获取事件对象

语法格式：

变量名.onclick = function(e){

     // e 就是事件对象，event的缩写，DOM 标准中，是给事件处理函数一个参数，系统提供  
　　　// 在老版本的 IE 中获取事件对象的方式为 window.event

}

处理事件的兼容性：

e = e || window.event;

3、事件对象的属性和方法

（1）e.eventPhase

获取事件的阶段：1 捕获阶段 2 目标阶段 3 冒泡阶段

（2）e.target

获取真正触发事件的对象，存在浏览器兼容问题。

在老版本的 IE 中， srcElement 是获取真正触发事件的对象

兼容性处理：

var target = e.target || e.srcElement;

（3）e.currentTarget

事件处理函数所属的对象，相当于 this 关键字

（4）e.type

获取事件的类型，如 click、mouseover、mouseout 等事件

（5）e.clientX / e.clientY

e.elientX 获取鼠标在浏览器的 可视区域 的 横坐标

e.clientY 获取鼠标在浏览器的 可视区域 的 纵坐标

（6）e.pageX / e.pageY

e.pageX 获取鼠标在 当前页面 的 横坐标 ；e.pageY 获取鼠标在 当前页面 的 纵坐标

该属性存在浏览器兼容性问题， IE8 以前不支持

处理兼容性代码：

 // 获取页面滚动距离的浏览器兼容性问题

 // 获取页面滚动出去的距离

 function getScroll() {

   var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;

   var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

   return {

     scrollLeft: scrollLeft,

     scrollTop: scrollTop

   }

 }

 // 获取鼠标在页面的位置，处理浏览器兼容性

 function getPage(e) {

   var pageX = e.pageX || e.clientX + getScroll().scrollLeft;

   var pageY = e.pageY || e.clientY + getScroll().scrollTop;

   return {

     pageX: pageX,

     pageY: pageY

   }

 }

（7）扩展

offsetLeft / offsetTop ,获取当前元素在可视区域内的距离左边和上面的距离

Demo：

 <div id="box">  </div>

 <script>

  var box = document.getElementById('box');

  box.onclick = function() {

     console.log(this.offsetLeft);    // 获取盒子距离左边的距离

     console.log(this.offsetTop);     // 获取盒子距离上边的距离

 }

 </script>

4、取消默认行为

（1）在函数中 return false 就可以取消默认行为的执行

（2）e.preventDefault() DOM中取消默认行为的标准方法

（3）e.preventValue = false; IE 的老版本，非标准方式

5、取消冒泡

（1）e.stopPropagation() DOM 中停止事件传播的标准方法

（2）e.cancleBubble = true 非标准的方式，老版本的 IE 支持，标准中已经废弃

6、常见的事件

（1）鼠标事件

- - click ：单击事件，元素被点击是触发该事件
  - change ：内容改变事件，当 input、select、textare 等元素内容发生改变时，触发该事件
  - focus ：当元素获取焦点时触发该事件
  - blur ：当元素失去焦点时触发该事件
  - onload ：当打开页面时，就会执行该事件，实际开发过程中，常常使用该事件在页面打开时初始化JS。
  - mouseover ：鼠标移入触发该事件
  - mouseout ：鼠标移出触发该事件
  - mousemove ：鼠标在该元素上面移动时触发该事件
  - mouseup ：鼠标按键放开时触发
  - mousedown ：鼠标按键按下触发
  - mouseenter： 鼠标移入触发该事件
  - mouseleave： 鼠标移出触发该事件