js高级程序设计笔记8--事件

事件流

描述的是从页面中接收事件的顺序。IE和Netscape开发团队提出了差不多完全相反的事件流的概念。

事件冒泡(IE)

事件开始时由最具体的元素接收，然后逐级向上播到较为不具体的节点（文档）.

事件捕获（Netscape)

其思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。
“DOM2级事件”规范要求事件应该从document对象开始传播，但很多浏览器都是从window对象开始捕获事件的。由于老版本的浏览器不支持，因此很少有人使用事件捕获。

DOM2级事件流

包括3个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先捕获事件，然后是实际的目标接收到事件。最后是冒泡阶段，可以在这个阶段对事件做出响应。

事件处理程序

可以通过函数中的局部变量event访问事件对象。

<input type="button" value="click me" onclick="alert(event.type)"/>

this值等于事件的目标元素。

<input type="button" value="click me" onclick="alert(this.value)"/>

DOM0级事件处理程序：将一个函数赋值给一个事件处理程序属性。

btn.onclick=function(){...}

DOM2级事件处理程序：定义了两个方法用于指定和删除事件处理程序：addEventListener(),removeEventListener()。他们都接收三个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值。(如果为true表示在捕获阶段调用事件处理程序，为false在冒泡阶段调用事件处理程序)

btn.addEventListener("click",function(){alert(this.id);},false);

IE事件处理程序

IE实现了与DOM类似的两个方法：attachEvent()和detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称和事件处理程序函数。添加的事件处理程序都会被添加到冒泡阶段。

btn.attachEvent("onclick",function(){...});

注：是onclick而不是DOM的addEventLIstener的click.
在IE中使用attachEvent()与使用DOM0级方法的主要区别在与事件处理程序的作用域。在使用DOM0级方法时，事件处理程序会在其所属元素的作用域内运行；在使用attachEvent()方法时，事件处理程序会在全局作用域中运行，因此this等于window。

btn.attachEvent("onclick",function(){    alert(this === window)//true});

跨浏览器的事件处理程序

var EventUtil = {    addHandler:function(element,type,handler){        if(element.addEventListener){            element.addEventListener(type,handler,false);        }else if(element.attachEvent){            element.attachEvent("on"+type,handler);        }else{            element["on"+type] = handler;        }    }    removeHandler: function(element, type, handler){        if (element.removeEventListener){            element.removeEventListener(type, handler, false);        } else if (element.detachEvent){            element.detachEvent("on" + type, handler);        } else {            element["on" + type] = null;        }    },}

事件对象

在触发DOM上的某个事件时，会产生一个事件对象event.

event.preventDefault():阻止事件的默认行为。
evnet.stopPropagation()；立即阻止事件在DOM层次中的传播。
event.evnetPhase:事件发生的阶段。

IE中的事件对象

访问IE中的event对象有几种不同的方式。在使用DOM0级方法添加处理程序时，event对象作为window对象的一个属性存在。

btn.onclick = function(){    var event = window.event;    alert(event.type);};

如果事件处理程序是使用attachEvent()添加的，那么就会有一个event对象作为参数传入函数中。

btn.attachEvent("onclick",function(event){alert(event.type);})

IE中的事件具有如下包含如下属性和方法：
cancelBubble:默认值为false,将其设置为true可以取消事件冒泡。（与DOM的stopPropagation()相同）
returnValue:默认值为true,将其设置为false可以取消事件的默认行为。(与DOM的preventDefault相同)
srcElement:事件的目标（与DOM中的targer属性相同）

跨浏览器的事件对象

var EventUtil = {    ...    getEvent:function(event){        return event?event:window.event;    }    getTarget:function(event){        return event.target || event.srcElement;    }    preventDefault:function(event){        if(event.preventDefault){            event.preventDefault();        }else{            event.returnValue = false;        }    }    stopPropagation:function(event){        if(event.stopPropagation){            event.stopPropagation();        }else{            event.cancelBubble = true;        }    }}

事件类型

UI事件

1. load事件。当页面加载后（包括所有图像，js文件，css文件等外部资源），就会触发load事件。
   根据“DOM2级事件”规范，应该在document而非window上面触发load事件，但是所有浏览器都在window上实现了该事件，以确保向后兼容。
2. unload事件。在文档被完全卸载后触发。只要用户从一个页面切换到另一个页面，就会触发unload事件。利用这个事件最多的情况是清楚引用，避免内存泄漏。
3. resize事件。当浏览器窗口被调整到一个新的高度或宽度时，就会触发resize事件。何时触发resize事件不同浏览器有不同的机制。IE，Safari，chrome,opera会在浏览器窗口变化了1像素时就触发resize事件，而FireFox则会在用户停止调整窗口大小时才会触发。
4. scroll事件
   scroll事件是在window对象上发生的，当它实际上表示的则是页面中相应元素的变化。

鼠标与滚轮事件

click:鼠标单击
dblclick:鼠标双击
mousedown:鼠标按下时触发
mouseenter:在鼠标光标从元素外部首次移动到元素范围之内时触发。此事件不会冒泡。
mouseleave:在位于元素上方的鼠标光标移动到元素范围之外时触发。此事件不会冒泡。
mousemove:当鼠标指针在元素内部移动时重复的触发。
mouseout:在鼠标指针位于一个元素上方，然后用户将其首次移入另一个元素时触发。
mouseover:在鼠标指针位于一个元素外部，然年用户将其首次移入另一个元素边界之内时触发。
mouseup:释放鼠标按钮时触发。

DOM通过event对象的relatedTarget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值。IE8及之前版本不支持这个属性。在IE8中，mouseover事件触发时，fromElement属性保存相关元素。mouseout事件触发时，toElement属性保存着相关元素。

var EventUtil = {    ...    getRelatedTarget:function(event){        if(event.relatedTarget){            return event.relatedTarget;        }else if(event.toElement){            return event.toElement;        }else if(event.fromElement){            return event.fromElement;        }else{            return null;        }    }}

键盘与文本事件

keydown:按下键盘
keypress:当用户按下键盘上的字符键时触发。
keyup:释放键盘上的键
1.键码：event对象的keyCode属性会包含一个代码，与键盘上一个特定的键对应。对于数字字母键，keyCode的属性值与ASCII码只能怪对应小写字母或数字的编码相同。
2. 字符编码
按下能够插入或删除字符的键都会触发keypress事件。按下其他键能够触发此事件因浏览器而异。event对象有个charCode事件。这个属性只有在发生keypress事件时才包含。而且这个值是按下的键所代表字符的ASCII编码。IE8及其之前版本和Opera则是在keyCode保存ASCII码。

var EventUtil = {    getCharCode:function(event){        if(typeof event.charCode == "number"){            reutrn event.charCode;        }else{            return event.keyCode;        }    }}

DOM3级变化

DOM3级的键盘事件不再包含charCode属性。而是两个新属性key和char.
key的值为一个字符串。为相应键的文本字符。而char的值按下字符键时的行为与key相同。但是按下非字符键时返回null.
IE9支持key属性，但不支持char属性。Sarari5和Chrome支持名为keyIdentifier的属性。在按下非字符键时（例如shift）时与key相同，对于字符键，keyIdentifier返回一个格式“U+0000”的字符串，类似Unicode值。

textInput事件

当用户在可编辑区域中输入字符时就会触发这个事件。此事件对象还包含一个data属性，值为用户输入的字符。

haschange事件

HTML5新增了haschange事件，以便在URL的参数列表（及URL中“#”号后面的所有字符串）发生变化是通知开发人员。