JavaScript 事件处理

事件处理

1、事件概述

事件处理程序：指的就是JavaScript为响应用户行为所执行的程序代码。

事件驱动式：是指在Web页面中JavaScript的事件，侦测到的用户行为，并执行相应的事件处理程序的过程。

事件流：事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个事件传播的过程就是事件流。

事件流的传播顺序解决方案：网景（Netscape）提出了“事件捕获方式”、微软（Microsoft）提出了“事件冒泡方式”。

事件捕获方式（网景）：事件流传播的顺序应该是从DOM树的根节点到发生事件的元素节点。

事件冒泡方式（微软）：事件流传播的顺序应该是从发生事件的元素节点到DOM树的根节点。

2、事件的绑定方式

概念：事件绑定指的是为某个元素对象的事件绑定事件处理程序。

（1）事件的行内绑定式是通过HTML标签的属性设置实现的。

<标签名  事件="事件的处理程序">

注意：由于开发中提倡JavaScript代码与HTML代码相分离。因此，不建议使用行内式绑定事件。

（2）动态绑定实现方式：在JavaScript代码中，为需要事件处理的DOM元素对象，添加事件与事件处理程序。

DOM元素对象.事件 = 事件的处理程序;

事件的处理程序一般都是匿名函数或有名的函数。

行内绑定式与动态绑定式的异同

不同点：

• 实现语法不同，前者通过HTML标签的属性设置，后者在JS中处理DOM对象。
• 事件处理程序中关键字this的指向也不同。前者指向window对象，后者指向当前正在操作的DOM元素对象。

相同点：

同一个DOM对象的同一个事件只能有一个事件处理程序。

（3）事件监听式实现的方式：具有兼容性问题，一类是早期版本的IE浏览器（如IE6~8），一类遵循W3C标准的浏览器（以下简称标准浏览器）。

//早期版本IE浏览器
DOM对象.attachEvent(type,callback);

• 参数type指的是为DOM对象绑定的事件类型，它是由on与事件名称组成的，如onclick。
• 参数callback表示事件的处理程序。

//标准浏览器
DOM对象.addEventListener(type,callback, [capture]);

• 参数type指的是DOM对象绑定的事件类型，它是由事件名称设置的，如click。
• 参数callback表示事件的处理程序。
• 参数capture默认值为false，表示在冒泡阶段完成事件处理，将其设置为true时，表示在捕获阶段完成事件处理。

事件监听式的两种不同实现方式的区别

1. 实现的语法不同。
2. 事件处理程序的触发顺序也不相同，同一个对象的相同事件，早期版本IE浏览器的事件处理程序按照添加的顺序倒序执行。而标准浏览器的事件处理程序按照添加顺序正序执行。

注意：事件监听的处理程序是一个有名的函数时，可移出事件监听。

• DOM对象.detachEvent(type,callback); // 早期版本IE浏览器

• DOM对象.removeEventListener(type,callback); // 标准浏览器

参数type值的设置要与添加事件监听的事件类型相同，参数callback表示事件处理程序的名称，即函数名。

事件对象

1、获取事件对象

事件对象的来源：当发生事件时，都会产生一个事件对象event。

事件对象的作用：这个对象中包含着所有与事件相关的信息，包括发生事件的DOM元素、事件的类型以及其他与特定事件相关的信息。

获取事件对象的方式

• 早期IE浏览器（IE6~8）：window.event
• 标准浏览器：会将一个event对象直接传入到事件处理程序中。

var event = e || window.event; 

2、常用属性和方法

获取触发事件的元素

var btn = document.getElementById('btn');
  btn.onclick = function(e) {
      var obj = event.target || window.event.srcElement;
      console.log(obj.nodeName); 
      console.log(obj.id);
      console.log(obj.className); 
      console.log(obj.innerText); 
  };

禁止默认行为

<a id="test" href="http://www.example.com">默认链接</a>
  <script>
    document.getElementById('test').onclick = function(e) {
      if (window.event) { // 早期版本IE浏览器
        window.event.returnValue = false;
      } else {  //标准浏览器
        e.preventDefault();
      }
    };
  </script>

事件分类

1、页面事件

页面加载顺序问题解决办法：页面事件可以改变JavaScript代码的执行时机。

load事件：用于body内所有标签都加载完成后才触发，又因其无需考虑页面加载顺序的问题，常常在开发具体功能时添加。

unload事件：用于页面关闭时触发，经常用于清除引用避免内存泄漏时使用。

window.onload = function() {
    // JavaScript代码
  };

2、焦点事件

在Web开发中，焦点事件多用于表单验证功能，是最常用的事件之一。

3、鼠标事件

在项目开发中还经常涉及一些常用的鼠标属性，用来获取当前鼠标的位置信息。

IE6~8浏览器中不兼容pageX和pageY属性。因此，项目开发时需要对IE6~8浏览器进行兼容处理。

var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;

4、键盘事件

注意：

• keypress事件保存的按键值是ASCII码，
• keydown和keyup事件保存的按键值是虚拟键码。

5、表单事件