第十三章 事件

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.在使用事件时需考虑的一些内存与性能的问题:

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335

推荐阅读更多精彩内容

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