事件

事件流描述的是从页面中接受事件的顺序。IE的事件流是事件冒泡流;而Netscape Communicator的事件流是事件捕获流

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

事件捕获流:其思想是不太具体的节点应该最早接收到事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。

==>主推使用事件冒泡!

DOM事件流:分为三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。

首先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段,可以在这个阶段对事件作出响应。


在高版本浏览器当中,都会在捕获阶段触发事件对象上的事件。结果就有两个机会在目标对象上面操作事件。

事件处理程序的名字以“on”开头,因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload。

->为事件指定处理程序的方式:

●HTML事件处理程序

●DOM0级事件处理程序

●DOM2级事件处理程序

●IE事件处理程序

●跨浏览器的事件处理程序

●HTML事件处理程序:

第一种定义方式

注:这个操作是通过指定oclick特性并将一些JavaScript代码作为它的只来定义的。因此不能在其中使用未经转义的HTML语法字符。

第二种定义方式

这种定义方式具有独到之处:1.这样会创建一个封装着元素属性值的函数;2.扩展作用域。

●DOM0级事件处理程序:

注意:在这些代码运行之前不会指定时间处理程序,即上述代码如果位于按钮后面,就有可能一段时间单击没反应。

使用DOM0级方法指定的事件处理程序被认为是元素的方法。如上述中的this引用当前元素。(以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理)

●DOM2级事件处理程序:

addEventListener()removeEventListener()两者都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值(如果布尔值是true,表示在捕获阶段调用事件处理程序;如果是false,则表示在冒泡阶段调用事件处理程序)。==》不是特别需要,我们不建议在事件捕获阶段注册事件处理程序。

注:这里添加的事件处理程序也是在其依附的元素的作用域中运行。其主要好处是可以添加多个事件处理程序,且这些处理程序按顺序执行。

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除;移除时传入的参数与添加处理程序使用的参数相同。

注:如果addEventlistener()添加的是匿名函数将无法移除。

●IE事件处理程序 

attachEvent()和detachEvent()其方法作用类似于上述addEventListener()和removeEventListener() ,其主要用于IE8及更早版本的浏览器下。

==>主要区别:1.attachEvent()和detachEvent()接受的参数为两个 2.它们的事件处理程序会在全局作用域中运行,因此this等于window 3.通过attachEvent()添加多个方法时,其响应顺序则是相反方向。

●跨浏览器的事件处理程序

其目的是为了解决上述存在的兼容问题。

定义一个EventUtil对象:

使用它:

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

推荐阅读更多精彩内容

  • 一、问答 1. dom对象的innerText和innerHTML有什么区别? innerHTML: 也就是从对象...
    饥人谷_罗伟恩阅读 596评论 0 2
  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 1,256评论 3 11
  • 本章内容 理解事件流 使用事件处理程序 不同的事件类型 JavaScript 与 HTML 之间的交互是通过事件实...
    闷油瓶小张阅读 282评论 0 0
  • 如何批量操作 css 如何获取 DOM 计算后的样式 使用getComputedStyle获取元素计算后的样式 实...
    _Dot912阅读 558评论 1 3
  • 事件 JavaScript和HTML的交互是通过事件实现的。JavaScript采用异步事件驱动编程模型,当文档、...
    徐国军_plus阅读 580评论 0 2