IE和DOM事件流的区别 
IE采用冒泡型事件 Netscape(网络信息浏览器)使用捕获型事件 DOM使用先捕获后冒泡型事件
示例:
<body>
<div>
<button>click</button>
</div>
</body>
冒泡型事件模型:button->div->
body (IE事件流)
捕获型事件模型:body->div->button (Netscape事件流)
DOM事件模型:body->div->button->button->div->body (先捕获后冒泡)
普通添加事件的方法:
var btn = document.getElementById("btn");
btn.onclick = function(){
alert(1);
}
btn.onclick = function(){
alert(2);
}
执行上面的代码只会alert 2
事件绑定方式添加事件:
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
alert(1);
},false);
btn.addEventListener("click",function(){
alert(2);
},false);
执行上面的代码会先alert 1再执行alert 2
普通添加事件的方法不支持添加多个事件,最下面的事件会覆盖上面的,而事件绑定(addEventListener)方式添加事件可以添加多个!!!

IE和DOM事件流、普通事件和绑定事件的区别的更多相关文章

  1. 对jquery新增加的class绑定事件 jquery 对相同class 绑定事件

    当页面加载时,就会注册所有的事件,后面通过jquery新增的内容(<div class="item"></div>),再对新增的添加事件$(".i ...

  2. 理解DOM事件流的三个阶段

    本文主要解决两个问题: 1.什么是事件流 2.DOM事件流的三个阶段 事件流之事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张 ...

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

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

  4. js事件捕获,事件冒泡,事件委托以及DOM事件流

    一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...

  5. 理解DOM中的事件流

    浏览器发展到第四代时(IE4和Netscape Communicator 4),浏览器团队遇到一个很有意思的问题:页面的哪一部分会拥有特定的事件?想象下在一张纸上有一组同心圆,如果你把手指放在圆心上, ...

  6. 关于DOM事件流、DOM0级事件与DOM2级事件

    一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...

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

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

  8. js:事件(注册、解绑、DOM事件流、事件对象、事件委托)

    1.注册事件 (1)传统方式注册事件 <body> <button id="b1">请点击</button> <script> va ...

  9. HTML 事件(三) 事件流与事件委托

    本篇主要介绍HTML DOM中的事件流和事件委托. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4 ...

  10. javaScript事件(一)事件流

    一.事件 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.事件是javaScript和DOM之间的桥梁.你若触发,我便执行——事件发生,调用它的处理函数 ...

随机推荐

  1. 2016/3/18 ①PHP基础 ② PHP函数 ③其他函数(随机数、关于日期) ④正则表达式 ⑤字符串处理

    一.PHP基础 1,标记和注释 ①<?php?> ②单行注释// 多行注释/**    */2, 输出语句 ①echo输出 echo可以输出多个字符串,用逗号隔开. ②print输出 pr ...

  2. 将最大主机/ DNS名称字符长度从63增加到255

    https://mp.weixin.qq.com/s/WcjaAgAOvEhjtP2nXx5Fhw Zabbix 4.0.0alpha8发行说明 运维帮 昨天 Zabbix团队很高兴地宣布Zabbix ...

  3. Chapter 20: Diagnostics

    WHAT'S IN THIS CHAPTER?n Code contractsn Tracingn Event loggingn Performance monitoringWROX.COM CODE ...

  4. YTU 2412: 帮警长数一数【循环、分支简单综合】

    2412: 帮警长数一数[循环.分支简单综合] 时间限制: 1 Sec  内存限制: 64 MB 提交: 323  解决: 169 题目描述 黑猫警长在犯罪现场发现了一些血迹,现已经委托检验机构确定了 ...

  5. 【转】浏览器中输入url后发生了什么

    原文地址:http://www.jianshu.com/p/c1dfc6caa520 在学习前端的过程中经常看到这样一个问题:当你在浏览器中输入url后发生了什么?下面是个人学习过程中的总结,供个人复 ...

  6. Java Socket实战之五:使用加密协议传输对象

    转自:http://developer.51cto.com/art/201202/317547.htm 前面几篇博文提到了Socket中一些常用的用法,但是对于一些有安全要求的应用就需要加密传输的数据 ...

  7. FluentData - 轻量级.NET ORM持久化技术解决方案

    官方地址:http://fluentdata.codeplex.com/ 官方教程:http://fluentdata.codeplex.com/documentation FluentData入门 ...

  8. Linux 常用命令十四 killall和pkill

    用killall杀死所有同名的进程. wang@wang:~/workpalce/git$ ps -aux | grep vim wang pts/ S+ : : vim a wang pts/ S+ ...

  9. setsockopt()函数功能介绍

    功能描述: 获取或者设置与某个套接字关联的选 项.选项可能存在于多层协议中,它们总会出现在最上面的套接字层.当操作套接字选项时, 选项位于的层和选项的名称必须给出.为了操作套接字层的选项,应该 将层的 ...

  10. php安装的扩展php -m可以看到,但是phpinfo()看不到,php-fpm关闭了重新打开还是不行?

    问答 问答详情   php安装的扩展php -m可以看到,但是phpinfo()看不到,php-fpm关闭了重新打开还是不行? centos apache linux html php 3.2k 次浏 ...