该文章已转移到博客:https://cynthia0329.github.io/

1.执行的顺序不一样

冒泡型事件模型: button->div->body (IE事件流)

捕获型事件模型: body->div->button (Netscape事件流)

DOM事件模型: body->div->button->button->div->body (先捕获后冒泡)

2.事件侦听函数的区别 

  1. IE使用:
  1. [Object].attachEvent("name_of_event_handler", fnHandler); //绑定函数
  2. [Object].detachEvent("name_of_event_handler", fnHandler); //移除绑定
  1. DOM使用:
  1. [Object].addEventListener("name_of_event", fnHandler, bCapture); //绑定函数
  2. [Object].removeEventListener("name_of_event", fnHandler, bCapture); //移除绑定

3、参数不一样和this指向不一样

IE下注册多个事件监听器与移除监听器方法

注册多个事件监听器

  1. element.attachEvent('onclick', observer);

attachEvent接受两个参数

第一个参数是事件名称

第二个参数observer是回调处理函数。

这里得说明一下,有个经常会出错的地方,IE下利用attachEvent注册的处理函数调用时this指向不再是先前注册事件的元素,这时的thiswindow对象了,笔者很奇怪IE为什么要这么做,完全看不出好处所在。

移除先前注册的事件的监听器

  1. element.detachEvent('onclick', observer);

DOM标准下注册多个事件监听器与移除监听器方法

注册多个事件监听器

实现DOM标准的浏览器与IE浏览器中注册元素事件监听器方式有所不同,它通过元素的addEventListener方法注册,该方法既支持注册冒泡型事件处理,又支持捕获型事件处理。

  1. element.addEventListener('click', observer, useCapture);

addEventListener方法接受三个参数

第一个参数是事件名称,值得注意的是,这里事件名称与IE的不同,事件名称是没’on’开头的;

第二个参数observer是回调处理函数;

第三个参数注明该处理回调函数是在事件传递过程中的捕获阶段被调用还是冒泡阶段被调用

它可以在一个DOM元素上绑定多个事件处理器,并且在处理函数内部,this关键字仍然指向被绑定的DOM元素,另外处理函数参数列表的第一个位置传递事件event对象。

移除先前注册的事件的监听器

  1. element.removeEventListener('click', observer, useCapture);

参考:

https://www.cnblogs.com/nikiguo/p/8522317.html

[已转移]IE事件流和DOM标准事件流的区别的更多相关文章

  1. jQuery on() 方法 为选定已存在元素和未来元素绑定标准事件和自定义事件

    很有必要说说jQuery的on方法,这个方法存在大乾坤大奥秘,主要注意两点: 1.为已存在元素和未来元素(动态添加元素)绑定处理函数. 2.自定义一个非标准的事件并绑定处理函数. 定义和用法 on() ...

  2. js事件(一)之事件流

    1.事件流定义 事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流. 事件传播的顺序对应浏览器的两种事件流模型:捕获型事件流和冒泡型事 ...

  3. javascript系列之DOM(三)---事件

    原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定 ...

  4. 5事件DOM零级事件跟DOM二级事件

    事件的行为传播,行为本身跟事件绑定没有关系:1.全新认识事件(某一个具体的行为)->行为本身:浏览器天生自带的一些行为操作->click,mouseover(mouseenter),mou ...

  5. [已转移]JavaScript事件---DOM事件流

    该文章已转移到博客:https://cynthia0329.github.io/ 事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件 这个传播过程即DOM事件流. ...

  6. [已转移]js事件流之事件冒泡的应用----事件委托

    该文章已转移到博客:https://cynthia0329.github.io/ 什么是事件委托? 它还有一个名字叫事件代理. JavaScript高级程序设计上讲: 事件委托就是利用事件冒泡,只指定 ...

  7. [DOM Event Learning] Section 4 事件分发和DOM事件流

    [DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...

  8. 前端基本知识(一):W3C标准&&冒泡事件,捕获事件,W3C DOM对象模型,对比分析

    W3C标准是万维网联盟, 其他的可以参考万维网版本的更新内容 一.W3C标准 二.W3C DOM事件 三.冒泡事件 四.捕获事件 一.W3C标准 其实网页是由三分部组成:1.结构(structure) ...

  9. w3c标准 dom对象 事件冒泡和事件捕获

    http://www.cnblogs.com/chengxs/p/6388779.html http://www.jb51.net/article/42492.htm W3C标准是什么? 1.表现(c ...

随机推荐

  1. nodejs+express 初学(一)

    以下都是windows环境 1.下载nodejs http://www.nodejs.org/download/ 然后安装 2.确认已经安装完成 . node -v 3.安装express 注意: 是 ...

  2. LA3029 City Game

    Bob is a strategy game programming specialist. In his new city building game the gaming environment ...

  3. Luogu P2486 [SDOI2011]染色(树链剖分+线段树合并)

    Luogu P2486 [SDOI2011]染色 题面 题目描述 输入输出格式 输入格式: 输出格式: 对于每个询问操作,输出一行答案. 输入输出样例 输入样例: 6 5 2 2 1 2 1 1 1 ...

  4. Django项目:CRM(客户关系管理系统)--25--17PerfectCRM实现King_admin单列排序

    登陆密码设置参考 http://www.cnblogs.com/ujq3/p/8553784.html {#table_data_list.html#} {## ————————08PerfectCR ...

  5. TZ_16_Vue的v-model和v-on

    1.v-model是双向绑定,视图(View)和模型(Model)之间会互相影响. 既然是双向绑定,一定是在视图中可以修改数据,这样就限定了视图的元素类型.目前v-model的可使用元素有: inpu ...

  6. Hibernate - HHH000352: Unable to release batch statement

    这是hibernate的一个bug,具体看https://hibernate.atlassian.net/browse/HHH-11732?attachmentViewMode=list When u ...

  7. line-height:150%/1.5em与line-height:1.5的区别

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. DjangoORM查询、分页、ckeditor

    查询数据 Django的批量查询(查询所有,或者条件查询)返回的是queryset对象. Queryset对象是一个惰性对象,在不执行 1.排序 2.循环 3.截取 操作的情况下,不会遍历序列的内容. ...

  9. SSH 框架controller向jsp传递List jsp中使用el表达式获取

    mvc可以使用ModelAndViev传递数据选择跳转的视图 controller中的代码, 把一个模拟的表单studentListSimulate传给ModelAndView @RequestMap ...

  10. Vue.之.项目开发工具选用

    Vue.之.项目开发工具选用 上篇文章记录了创建项目,这篇文件记录,如何对创建的项目进行开发.这里选择一个工具:Visual Studio Code (请自行下载安装) 1. 打开VSCode工具,并 ...