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时，表示在捕获阶段完成事件处理。
事件监听式的两种不同实现方式的区别
- 实现的语法不同。
- 事件处理程序的触发顺序也不相同，同一个对象的相同事件，早期版本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、表单事件
