高三事件笔记

出处 :http://www.cnblogs.com/cmptlgg/ 
1.事件流 当浏览器发展到第四代时(IE4 及 Netscape Communicator 4),浏览器开发团队遇到了一个很有意思 的问题:页面的哪一部分会拥有某个特定的事件?要明白这个问题问的是什么,可以想象画在一张纸上 的一组同心圆。如果你把手指放在圆心上,那么你的手指指向的不是一个圆,而是纸上的所有圆。两家 公司的浏览器开发团队在看待浏览器事件方面还是一致的。如果你单击了某个按钮,他们都认为单击事 件不仅仅发生在按钮上。换句话说,在单击按钮的同时,你也单击了按钮的容器元素,甚至也单击了整 个页面。 事件流描述的是从页面中接收事件的顺序。但有意思的是, IE 和 Netscape 开发团队居然提出了差 不多是完全相反的事件流的概念。 IE 的事件流是事件冒泡流,而 Netscape Communicator 的事件流是事 件捕获流。从上面的概念可以得知:只要html元素是嵌套关系时,相应事件特性被触发,按照上述规则实现。 IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深 的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档) 所有现代浏览器都支持事件冒泡,但在具体实现上还是有一些差别。 IE5.5 及更早版本中的事件冒 泡会跳过<html>元素(从<body>直接跳到 document)。 IE9、 Firefox、 Chrome 和 Safari 则将事件一直 冒泡到 window 对象。 Netscape Communicator 团队提出的另一种事件流叫做事件捕获(event capturing)。事件捕获的思想 是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于在 事件到达预定目标之前捕获它。如果仍以前面的 HTML 页面作为演示事件捕获的例子,那么单击<div> 元素就会以下列顺序触发 click 事件。 虽然事件捕获是 Netscape Communicator 唯一支持的事件流模型,但 IE9、 Safari、 Chrome、 Opera 和 Firefox 目前也都支持这种事件流模型。尽管“ DOM2 级事件”规范要求事件应该从 document 对象 开始传播,但这些浏览器都是从 window 对象开始捕获事件的。 由于老版本的浏览器不支持,因此很少有人使用事件捕获。我们也建议读者放心地使用事件冒泡, 在有特殊需要时再使用事件捕获。 总结:事件流就是html文档接受事件处理程序的顺序,分为事件冒泡,事件捕获 DOM0 级事件处理程序 就是将一个函数赋值给一个事件处理程序属性 每个元素(包括 window 和 document)都有自己的事件处理程序属性,这些属性通常全部小写, 例如 onclick。将这种属性的值设置为一个函数,就可以指定事件处理程序. 以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。也就是说html文档接受事件处理程序的顺序使用的是事件冒泡; “ DOM2 级事件” 定义了两个方法,用于处理指定和删除事件处理程序的操作: addEventListener() 和 removeEventListener()。所有 DOM 节点中都包含这两个方法,并且它们都接受 3 个参数:要处 理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true,表示在捕获 阶段调用事件处理程序;如果是 false,表示在冒泡阶段调用事件处理程序。 多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大限度地兼容各种浏览 器。最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需 要,我们不建议在事件捕获阶段注册事件处理程序。DOM2 级方法添加事件处理程序的主要好处是可以添加多个事件处理程序; IE 实现了与 DOM 中类似的两个方法: attachEvent()和 detachEvent()。这两个方法接受相同 的两个参数:事件处理程序名称与事件处理程序函数。由于 IE8 及更早版本只支持事件冒泡,所以通过 attachEvent()添加的事件处理程序都会被添加到冒泡阶段。此函数的执行环境中的this等于window;与W3C DO2级事件处理函数在一个元素对象上添加多个事件处理程序执行的顺序是相反的。 dom2级事件对象中的event.target属性的值if(元素不是被冒泡||捕获触发的事件处理程序时,)event.target=自身触发的元素;else{event.target=触发冒泡||捕获的目标元素对象.} 只有在事件处理程序执行期间, event 对象才会存在;一旦事件处理程序执行完 成, event 对象就会被销毁。

  web前端||后端||winapp 162791594交流学习群


 

 

你可能感兴趣的:(事件)