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

2024-04-27 15:07:05

字体：大中小

来源：转载

供稿：网友

事件流

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

事件冒泡(IE)

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

事件捕获（Netscape)

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

DOM2级事件流

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

事件处理程序

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

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

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

跨浏览器的事件处理程序

事件对象

在触发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属性相同）

跨浏览器的事件对象

事件类型

UI事件

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

鼠标与滚轮事件

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

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

键盘与文本事件

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值。