10.第13章:事件

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

1.1 事件冒泡

事件开始时由最具体的元素(嵌套最深)接收,然后逐级向上传播到最外层节点(文档)。



1.2 事件捕获

从最外层不太具体的节点收到事件,传递给最内层的具体的节点。



1.3.DOM事件流

事件捕获阶段、目标阶段、事件冒泡阶段



捕获阶段:事件从ducument->html->body
目标阶段:事件在div上发生。在事件处理中被看成冒泡阶段的一部分。
冒泡阶段:事件传回document

2.事件处理

2.1.HTML事件处理

指定onclick属性:



缺点:时差问题、扩展事件处理程序的作用域链在不同浏览器有不同结果、HTML和JavaScript代码耦合。
摒弃此种方法,使用JavaScript指定时间处理程序。

2.2.DOM0级事件处理

使用DOM0级方法指定的事件处理程序被认为是元素的方法,这时候事件处理程序时在元素作用域中运行,程序中this引用当前元素。



2.3.DOM2级事件处理

定义了两个方法:添加事件addEventListener() 删除事件 removeEventListener()
接收三个参数:要处理的事件名、作为事件处理的函数、布尔值。
布尔值为true,表示在捕获阶段调用事件处理
布尔值为false,表示在冒泡阶段调用时间处理



使用addEventListener()添加的事件处理程序,只能用removeEventListener()移除,移除的参数与添加参数相同,通过addEventListener()添加的匿名函数将无法移除。




重写之后可以移除

可用的浏览器:
2.4.IE9之前版本事件处理

IE实现和DOM2事件处理类似的两个方法
attachEvent()和detachEvent()。
接收两个参数:事件名称,事件处理函数。IE8及之前版本只支持事件冒泡,所以不需要第三个参数。
注意:在IE中使用attachEvent()的作用域是全局作用域,this等于window。



使用attachEvent()添加的事件,只能使用detachEvent()来移除,同样参数必须相同。


图片.png
2.5.跨浏览器的事件处理

定义了两个方法addHandler和removeHandler()
接收三个参数,元素,事件类型,事件处理方法。
首先判断有没有DOM2的方法
没有再判断有没有IE的方法
没有就使用DOM1,这里直接给元素添加了属性。


3.事件对象

3.1 DOM中的事件对象

兼容DOM的浏览器都会将event对象传入到事件处理程序中。



在需要一个函数处理多个事件时,可以使用type属性。


  • 阻止特定事件的默认行为


  • 停止事件在DOM层次的传播,只会弹出一次警告框,body上的被禁止传播。


  • 事件对象的eventPhase属性:确定当前事件位于事件流的那个阶段。捕获1,目标处理2,冒泡3。


3.2 IE中的事件对象

访问IE中的event对象有几种不同的方式,取决于指定事件处理程序的方法。
i)DOM0级方法添加事件处理程序
event对象作为window属性存在



ii)DOM2,使用attachEvent(),就会有一个event对象作为参数被传入事件处理函数。


  • 取消给定事件的默认行为,与DOM中preventDefault()方法作用相同。


  • 停止事件冒泡,与DOM中stopPropagation()方法作用相同。


3.3 跨浏览器事件对象

4 事件类型

4.1 UI事件
  • load事件
    当页面完全加载后在window上出发,当体香加载完在img元素上触发。
    i)window上的事件有如下两种方式:




    ii)img的load事件



  • unload事件
    文档完全被卸载时触发。用户从一个页面切换到另一个页面会触发。



  • resize事件
    当浏览器窗口被调整到一个新的高度或宽度时,会触发resize事件。


  • scroll事件



    以上代码输出页面垂直滚动位置

4.2 焦点事件

会在页面获得或失去焦点时触发。


4.3 鼠标与滚轮事件

  • 客户区坐标位置
    相对于浏览器窗口的位置:clientX,clientY


  • 页面坐标位置
    判断在页面中的位置,从页面本身而非视口的左边和顶边计算的。pageX,pageY。没有滚动时与clientX,clientY相等。


  • 屏幕坐标位置
    相对于整个电脑屏幕的位置:screenX,screenY


  • 四个修改键


4.4 键盘与文本事件

三个键盘事件




1)键码
发生keydown和keyup事件时,event对象的keyCode属性会包含一个代码,与键盘上一个特定的键对应。



2)字符编码
如果按下的是字符,使用charCode属性获取值。

3)textInput事件
用户在可编辑区输入字符时,触发该事件。



用户按上档键和s,data值为S
没有按上档键,data值为s

5.内存和性能

5.1事件委托

对于事件处理程序过多的问题解决方案就是事件委托,利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。



要给所有的li添加事件,只需要为ul添加一个事件。


2.移除事件处理


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

推荐阅读更多精彩内容

  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 1,250评论 3 11
  • JavaScript 与 HTML 之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬...
    threetowns阅读 339评论 0 0
  • js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...
    道无虚阅读 2,334评论 1 3
  • 本章内容 理解事件流 使用事件处理程序 不同的事件类型 JavaScript 与 HTML 之间的交互是通过事件实...
    闷油瓶小张阅读 278评论 0 0
  • “大概就是因为不停地在遇到能让自己有勇气继续走向未来的人,所以生命才有了更完整的意义。从此不再囿于旧日的阴雨,也不...
    豫悦和谦阅读 187评论 0 0