IE和DOM事件流、普通事件和绑定事件的区别

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)方式添加事件可以添加多个!!!

原文地址:https://www.cnblogs.com/lhl66/p/8146714.html

时间: 2024-10-13 10:06:17

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

JS DOM基础 事件概述 事件流 事件处理方法 添加监听器 事件类型 事件对象 事件委托

一.事件概述 事件是什么? 在我们的生活中,都会接触到事件这样一个概念,它通常通过描述发生这件事的时间.地点.人物,发生了什么来进行概括. 同样的在javascript也有这样的一个的东西------事件. 页面上发生的事件:鼠标移动.点击.滚动等等. 事件描述了页面上发生的事情,通常它有以下三个要素组成: 事件源:触发事件的元素 事件类型:事件的触发方式(例如鼠标点击或键盘点击) 事件处理程序(事件监听器):事件触发后要执行的代码(函数形式) Javascript 使我们可以动态的去操作一个页

JavaScript DOM事件流

昨天一天被Amy姐姐讲懵圈了.讲的自信心快没有了,严重怀疑智商.所以今天写一篇相关的基础知识博客,好好补一下.心情有点low,但还是要加油!!!没有人会同情弱者. 历史由来:DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响.这两种事件流分别是捕获和冒泡.和许多Web技术一 样,在它们成为标准前,Netscape和微软各自不同地实现了它们.Netscape选择实现了捕获事件流,微软则实现了冒泡事件流.幸运的 是,W3C决定组合使用这两种方法,并且大多数新

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

[DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在数据结构中是如何传播的. 传播路径 事件对象(event objects)被分发给事件目标(event target),在分发开始的时候,在实现中必须先确定事件对象的传播路径. 这个传播路径必须是一个有序的list,其中包含了事件对象必须通过的事件目标. 对于DOM的实现来说,这个传播路径必须反映这

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

一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body→div ②处于目标阶段2:实际的目标到事件 ③事件冒泡阶段:由最具体的元素接收到事件,然后向上传播到较为不具体的节点.事件流模型:div →body→ html→ document 二:事件委托 事件委托顾名思义:将事件委托给另外的元素.其实就是利用DOM的事件冒泡原理,将事件绑定到目标元素的父节

浅谈js之事件流

这些日子我就把js的相关知识梳理一下,今天来说javascript中的事件流. 1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档).对于html来说,就是当一个元素产生了一个事件,它会把这个事件传递给它的父元素,父元素接收到了之后,还要继续传递给它的上一级元素,就这样一直传播到document对象(亲测现在的浏览器到win

理解JavaScript中的事件流

原文地址:http://my.oschina.net/sevenhdu/blog/332014 目录[-] 事件冒泡 事件捕获 DOM事件流 当浏览器发展到第四代时(IE4和Netscape Communicator 4),浏览器团队遇到一个很有意思的问题:页面的哪一部分会拥有特定的事件?想象下在一张纸上有一组同心圆,如果你把手指放在圆心上,那么你的手指指向的不是一个圆,而是一组圆.两家公司的开发团队在看待浏览器事件方面还是一致的.如果你单击了某个按钮,那么同时你也单击了按钮的容器元素,甚至整个

三言两语之js事件、事件流以及target、currentTarget、this那些事

厉害了我的哥——你是如此简单我却将你给遗忘   放假前再看某文档,里边提到两个我既熟悉又陌生的概念target.currentTarget,说他熟悉我曾经看到过这两个事件对象的异同处,说他陌生吧?很不巧.正要运用了,吾才发现吾压根就没记住...其实要讲清楚target.currentTarget,我们就不得不说一下事件流这个概念,而要言明事件流,我们也要晓得一下神马是事件以及一些周边生态概念,这三个概念是必须放在一块说,我们才能对能对这部分的知识有很好的理解滴,网上信息太零散,于是乎就有了这篇算

javascript 中 事件流和事件冒泡

/****************************************** 事件流 **************************************************/事件流 是描述页面接受事件的顺序,IE 使用的是时间冒泡流;而Netscape的事件采用的是事件捕获流.1.事件冒泡JS 和 HTML是通过事件的方式实现交互.事件冒泡 开始元素,将事件逐级传递,(例子:当你点击一个按钮的时候你就点击了html一直document). /***************

事件流

1.JavaScript与HTML之间的交互时通过事件实现的,事件流描述的是对象接收事件的顺序 2.事件流有两种,事件冒泡和事件捕获 3.事件冒泡:事件首先发生在最具体的对象上,然后沿着DOM树向上传播(不会受css影响),每一级都会发生事件,直到window对象,所有现代浏览器都支持事件冒泡 阻止冒泡:将当前事件函数中event对象的cancelBubble属性设置为true即可,这个方式只能阻止当前事件的冒泡 5.事件捕获:window首先接收到事件,沿着节点树传播,最具体的节点最后接收事件

javaScript事件(一)事件流

一.事件 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.事件是javaScript和DOM之间的桥梁.你若触发,我便执行——事件发生,调用它的处理函数执行相应的JavaScript代码给出响应.典型的例子有:页面加载完毕触发load事件:用户单击元素,触发click事件. 二.事件流 1.事件流感性认识问题:单击页面元素,什么样的元素能感应到这样一个事件?答案:单击元素的同时,也单击了元素的容器元素,甚至整个页面.例子:有三个同心圆, 给每个圆添