JavaScript学习笔记（8）事件

一、事件概述
1.事件概述
事件冒泡方式（微软）：

事件捕捉方式（网景）：

W3C解决方案：

1.规定事件发生后，先实现事件捕获，
2.但不会对事件进行处理。
3.接着进行到目标阶段，执行当前元素
4.对象的事件处理程序，但它会被看成是
5.冒泡阶段的一部分。
6.最后实现事件的冒泡，逐级对事件进行处理

2.事件的绑定方式
①行内绑定

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

②动态绑定

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

③事件监听式

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

二、事件对象
1.获取事件对象

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

red.onclick = function() { console.log('red'); };
green.onclick = function() { console.log('green'); };
yellow.onclick = function() { console.log('yellow'); };

if (window.event) {	// 早期IE浏览器
  window.event.cancelBubble = true;
} else {			// 标准浏览器
  e.stopPropagation();
}

三、事件分类
1.页面事件
页面事件可以改变JavaScript代码的执行时机。
load事件：用于body内所有标签都加载完成后才触发，又因其无需考虑页面加载顺序的问题，常常在开发具体功能时添加。
unload事件：用于页面关闭时触发，经常用于清除引用避免内存泄漏时使用

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

2.焦点事件

焦点事件多用于表单验证功能，是最常用的事件之一。
例如，文本框获取焦点改变文本框的样式，文本框失去焦点时验证文本框内输入的数据等。

3.鼠标事件
例如，鼠标滑过时，切换Tab栏显示的内容；利用鼠标拖拽曳状态框，调整它的显示位置等，这些常见的网页效果都会用到鼠标事件

兼容处理

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

4.键盘事件
指用户在使用键盘时触发的事件。
例如，用户按Esc键关闭打开的状态栏，按Enter键直接完成光标的上下切换等

5.表单事件
指的是对Web表单操作时发生的事件。
例如，表单提交前对表单的验证，表单重置时的确认操作等。JavaScript提供了相关的表单事件。