javascript流,js文档流

javascript事件流是什么?有哪些事件流?

JavaScript对这种问题的处理方式可以称之为事件流即事件的传播机制。对于事件流IE跟FF有不同的解释。IE下的解决方案称之为：

创新互联是专业的景县网站建设公司，景县接单;提供成都网站制作、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行景县网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

冒泡型事件，而FF下称之为：捕获型事件。顾名思义冒泡型事件是从低而上的触发机制，而捕获型事件则是从上到下的触发机制。《JavaScript高级程序设计》一书提到:

DOM事件流同时支持两种事件触发机制，但是捕获型事件先发生。注意因为事件的目标（也就是DOM树最深的节点）是最精确的元素，实际上它会连续接收两次事件，一次是在捕获过程中，一次是在冒泡过程中。事情到底是不是这样呢？观察下面的程序：

＜html onclick=" clickHandle('html'); "＞

＜head＞

＜title＞JAVASCRIPT事件流＜/title＞

＜meta http-equiv="content-type" content="text/html; charset=GBK"＞

＜script type="text/javascript"＞

function clickHandle(ele){

alert(ele);

}

＜/script＞

＜/head＞

＜body onclick=" clickHandle('body'); "＞

＜div style="bgcolor:red" onclick=" clickHandle('div'); "＞click me!＜/div＞

＜/body＞

＜/html＞

IE：点击 click me 运行顺序为：DIV--＞BODY--＞HTML 点击页面其他部分：BODY--＞HTML

FF: 点击 click me 运行顺序为：DIV--＞HTML--＞BODY 点击页面其他部分：HTML--＞BODY

JavaScript为我们提供了三种事件处理函数的分配方式，第一种就像上面的程序一样，是在HTML代码中分配事件处理函数。

第二种方法是在JavaScript中分配事件处理函数，这种方法首先必须得获得要分配事件处理函数的元素的引用，参考以下程序：

1 window.onload = function(){

2 var oDiv = document.getElementById("contentDiv");

3 oDiv.onclick = function(){

4 alert(oDiv.innerHTML);

5 }

6 }

就像上面提到的，该方法在分配事件处理函数时必须保证已经获得对该元素的引用，所以这个程序才把oDiv的onclick事件放在了onload事件的内部，否则会报oDiv未被定义。

还有一个需要注意的地方是使用这种事件处理函数的分配方式时只能为某个特定的事件分配一个函数且事件函数的签名必须小写，否则前面分配的函数会被后面的函数所覆盖。

如果想为同一个事件分配两个以上的处理函数，需要采用第三种事件处理函数分配方式。

在IE中我们使用obj.attachEvent()方法为某个元素分配函数，使用obj.detachEvent()方法为某个元素分离事件处理函数，而在DOM（以FireFox为例）中我们使用addEventListener()方法分配函数，使用removeEventListener()方法分离函数。

参考一下代码：

1 window.onload = function(){

2 var oDiv = document.getElementById("contentDiv");

3 var func1 = function(){

4 alert(oDiv.innerHTML);

5 }

6 var func2 = function(){

7 alert("also " + oDiv.innerHTML);

8 }

9 //IE

10 if(oDiv.attachEvent){

11 oDiv.attachEvent("onclick",func1);

12 oDiv.attachEvent("onclick",func2);

13 //oDiv.detachEvent("onclick",func1);

14 } else if(oDiv.addEventListener){

15 //FireFox

16 oDiv.addEventListener("click",func1,true);

17 oDiv.addEventListener("click",func2,true);

18 //oDiv.removeEventListener("click",func1,true);

19 }

21 }

我们来说明一下IE下与FireFox下这种事件处理函数的不同点：

1、在函数的第一个参数中，IE下必须有"on"做为前缀，而FF下不用，两种情况下处理函数签名必须小写。

2、FireFox下的addEventListener()函数的第三个参数表示的是：true表示在捕获阶段增加事件处理函数，false表示在冒泡阶段增加事件处理函数，但是由于FireFox不支持冒泡事件流，所以这里我们设成True或者Flase好像没什么区别。

但是要注意的一点就是，如果在 addEventListener()中第三个参数设为true,那么在removeEventListener()方法中的第三个参数一定也要设为相同的值，否则方法失效。

3、在运行时阶段，IE首先执行的是最后边一个被增加的事件处理函数然后才是倒数第二个以此类推，但是在FireFox下与IE相反，他会按照事件处理函数的添加顺序执行。

什么是JavaScript事件流及事件处理程序详解

先提两个关键词，方便你查找更详细的分析：1）事件冒泡 2）事件捕获

然后借用一下网上的一个图：

如图：有三个圆，好比dom中的三个div，当你点击了绿色圆的同时，会有两个连带事件：

点击了蓝圆

点击了粉圆

那么当你这三个圆（div）都绑定了点击事件时，该怎么触发呢，同时触发？显然不是，这是就涉及到一开始给你的两个关键词了。

事件捕获：js会顺着文档流顺序由外往内，依次触发事件。即从DOM树的根到叶子，粉-蓝-绿

事件冒泡：js会逆着文档流顺序由内至外，一次触发事件。即从DOM树的叶子到根，绿-蓝-粉

补充一点：多数时候推荐事件冒泡，因为大多数主流浏览器都兼容两种事件，但一开始ie是不支持事件捕获的，后来ie是否支持最近没有具体了解，应该是可以设置，有需要可以百度一下，本人小菜，以上回答如有错误还请指出，谢谢。

javascript的文档流是什么意思

Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。

文档流是文档中可显示对象在排列时所占用的位置。比如网页的div标签它默认占用的宽度位置是一整行，p标签默认占用宽度也是一整行，因为div标签和p标签是块状对象。网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域。当然我们也可以让占用文档流的元素转换成不占文档流，这就要用到CSS中属性position来控制。看看CSS 2.0对position的定义：检索对象的定位方式。共有4种取值。 static：默认值，无特殊（静态）定位。对象遵循HTML定位规则。 absolute：绝对定位。将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。 fixed：固定定位。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。当对象定位在浏览器窗口以外，浏览器不会因此显示滚动条，而当滚动条滚动时，对象始终固定在原来位置。 relative：相对定位。对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。 inherit：继承值，对象将继承其父对象相应的值。[1]

Javascript的事件流模型都有什么?

JavaScript中的事件流模型有冒泡事件流、捕获事件流和DOM事件流。其中dom同时支持两种事件模型，但捕获性事件先开始，从document开始也结束于document，dom模型的独特之处在于文本也可以触发事件

网页标题：javascript流,js文档流
分享URL：https://www.cdcxhl.com/article42/dsdjeec.html

成都网站建设公司_创新互联，为您提供自适应网站、微信小程序、搜索引擎优化、网站设计公司、微信公众号、网站维护

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容