第十三章 事件

1.事件流:描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流,而Netscape Communicator的事件流是事件捕获流。


2.事件冒泡:事件开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)

   事件捕获:事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。


3.所有现代浏览器都支持事件冒泡。IE 5.5及更早版本中的事件冒泡会跳过<html>元素;IE9、Firefox、Chrome和Safari则将事件一直冒泡到window对象


4.“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段


5.事件:用户或浏览器自身执行的某种动作,例如click、load;

   事件处理程序(事件侦听器):响应某个事件的函数,其名字以“on”开头,如onclick、onload


6.使用DOM0级方法指定的事件处理程序被认为是元素的方法,也就是指程序中的this引用当前元素

var btn = document . getElementById ("myBtn") ;

btn . onclick = function(){

    alert(this . id) ;   //"myBtn"

}

DOM2级事件用于处理指定和删除事件处理程序的操作的方法:addEventListener()和removeEventListener()。addEventListener()添加的匿名函数无法移除。


7.①attachEvent()的第一个参数是"onclick",而非DOM的addEventListener()方法中的"click"。

   ②在使用attachEvent()方法的情况下,事件处理程序会在全局作用域中运行,this等于window

   ③使用attachEvent()添加的事件处理程序不是以添加它们的顺序执行,而是以相反的顺序被触发


8.无论指定事件处理程序时使用什么方法(DOM0级或DOM2级),都会传入event对象


9.在事件处理程序内部,对象this始终等于currentTarget的值,而target则只包含事件的实际目标


10.preventDefault()取消其默认行为;stopPropagation()用于立即停止事件在DOM层次中的传播


11.IE中的event对象:

①DOM0级方法添加:event对象作为window对象的一个属性存在

②attachEvent()添加:event对象作为参数被传入事件处理程序函数中

③HTML特性指定的:通过名叫event的变量来访问event对象


12.load事件:当页面完全加载后(包括所有图像、JavaScript文件、CSS文件等外部资源),就会触发window上面的load事件


13.unload事件:用户从一个页面切换到另一个页面,使用最多的情况是清除引用,以避免内存泄露。


14.①新图像元素不一定要从添加到文档后才开始下载,只要设置了src属性就会开始下载

     ②只有设置了<script>元素的src属性并将该元素添加到文档后,才会开始下载JavaScript文件


15.resize事件、scroll事件中的代码有可能被频繁执行,从而导致浏览器反应明显变慢,所以要尽量保持这两类事件处理程序的代码简单


16.除了mouseenter和mouseleave,所有鼠标事件都会冒泡,也可以被取消。取消鼠标事件的默认行为还会影响其他事件,因为鼠标事件与其他事件是密不可分的


17.①clientX、clientY:鼠标指针在视口中的水平和垂直位置

     ② pageX、pageY:鼠标指针在页面中的水平和垂直位置

③screenX、screenY:鼠标指针在屏幕中的水平和垂直位置


18.textInput事件和keypress事件区别:

①任何可获得焦点的元素都可以触发keypress事件,但只有可编辑区域可能触发textInput事件

②textInput事件只会在用户按下能够输入实际字符的键时才会被触发,而keypress事件则在按下能够影响文本显示的键时也会触发


19.load事件:在页面中一切都加载完毕时触发,包括外部资源

DOMContentLoaded事件:形成完整的DOM树之后触发,不理会图像、JavaScript文件、CSS文件或其他资源是否已经下载完毕


20.事件委托:利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型。所有用到按钮的事件(多数鼠标事件和键盘事件)都适合采用事件委托技术。最适合采用事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup和keypress。


21.“事件处理程序过多”问题的解决方案:

①采用事件委托技术,限制建立的连接数量。

②在不需要的时候移除事件处理程序。


22.DOM中的事件模拟:

①在document对象上使用createEvent()方法创建event对象

②使用与事件有关的信息对其进行初始化

③使用dispatchEvent()方法触发事件


23.IE中的事件模拟:

①调用document.createEventObject()方法创建event对象

②使用与事件有关的信息对其进行初始化

③使用fireEvent()方法触发事件


24.在使用事件时需考虑的一些内存与性能的问题:

①有必要限制一个页面中事件处理程序的数量,数量太多会导致占用大量内存,而且会让用户感觉页面反应不够灵敏

②建立在事件冒泡机制上的事件委托技术,可以有效地减少事件处理程序的数量

③建议在浏览器卸载页面之前移除页面中的所有事件处理程序

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 事件处理程序在应用中是必不可少的,虽然现在很多框架都有自己实现事件处理方法,但是熟知原生才能让我们应对各种各样的需...
    俗三疯阅读 311评论 0 1
  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 1,297评论 3 11
  • 13.1 事件流 “DOM2级事件”规定事件流包括3个阶段:事件捕获阶段,处于目标阶段,事件冒泡阶段。事件捕获表示...
    Elevens_regret阅读 468评论 0 0
  • 1)公司采购了一套业界领先的知识管理产品,比如企明KMC(广告)。要推广上线,知识库、博客、问答等功能的分类如何配...
    叫我王宝宝阅读 1,722评论 0 6
  • “喻斯洲为你死了,他死了!”秦念似乎很是得意的喧嚣着“你还有什么资格活着?你哥、喻斯洲,这个世界上在乎你的人都已经...
    西檬可乐阅读 311评论 1 1