一个事件其实在页面上 有多个元素相应事件处理,点击页面上的一个button,会发生什么?其实 是相当于先后点击了按钮,它的容器,及这个页面.也就是说没一个元素都按照特定的顺序响应那个事件.事件的发生顺序在IE和mozilla在事件支持上的主要差别.
事件流
冒泡技术.冒泡型事件的基本思想,事件按照从特定的事件目标开始到最不确定的事件目标.例如:
<html>
<head>
test
<head>
<body onclick="handle()">
<div onclick="handle1()">click</div>
</body>
</html>
IE5.5顺序是div --body--document.
在IE6中div-body--html--document.
mozilla的顺序是div--body--html--html--document--window.
还有另外一种技术:捕获型事件,它的执行顺序正好和冒泡技术相反,从document开始到div结束.
DOM事件流
同时支持2种事件,但是捕获型事件先发生.2种事件流会触及DOM中的所有对象,从document开始,也在document结束.DOM事件流最独特的性质是,文本节点也会触发事件(在IE不会),所以如果点击click, dom事件是这样的:
首先window--document--body--div--click.
然后click--div--body--document--window.
所以一个事件处理函数在DOM浏览器中会执行2次.
给事件指定处理函数 的做法比较简单
var obj = document.getElementById("id");
obj.onclick=function(){}
或者直接在html标签里加onclick="function-name"
这两种方式是在目前所有流行的浏览器种都可以使用.但是如何为每个事件分配多个处理函数呢?
IE的做法:
在IE 中,每个元素和window对象都有2个方法:attachEvent()和detachEvent(); attachEvent用来给一个事件附加事件处理函数. 而detachEvent用来将事件处理函数分离.每个方法都有2个参数:要分配的事件处理函数的名字(例如:onclick)和一个函数引用.
例如:
var fnClick=function(){alert("ss")}
var fnClick1=function(){alert("sss")}
var obj=document.getElementById("id")
obj.attachEvent("onclick",fnClick);
obj.attachEvent("onclick",fnClick1);
obj.detachEvent("onclick",fnClick);
事件的执行顺序是按照添加的顺序执行的.
DOM方法
dom中对应的方法是addEventListener()和removeEventListener ,这两个方法有3个参数,事件名称,要分配的函数和处理函数是用于冒泡阶段还是捕获阶段.如果事件处理函数是用在捕获阶段,第三个参数为true,冒泡阶段为false.用法和IE中的用法一样,不再多说了,就举一个例子吧:
var fnClick=function(){alert("ss")}
var fnClick1=function(){alert("sss")}
var obj=document.getElementById("id")
obj.addEventListener("click",fnClick,false);
obj.addEventListener("click",fnClick1,false);
obj.removeEventListener("click",fnClick,false);
注意这里的是事件名称"click",不是要分配的事件处理函数的名字"onclick",自己体会一下吧.
如何获取事件对象:
获取事件信息是很重要的事情,事件对象只在事件发生时被创建,而且只有在事件处理函数中可以访问,当所有的事件处理函数结束后,事件对象被销毁.
IE和DOM在获取事件对象上也是有差别的.
IE中,事件对象时window的一个属性event,也就是说必须在事件处理函数中这样访问:
obj.onclick=function(){obj 1= window.event;}
尽管它是window的属性,event对象也是只能在事件发生时访问.
DOM的准则说明,event对象必须座位唯一的参数传递给事件处理函数,所以在DOM浏览器中访问对象有两种方法:
1.obj.onclick=function(){obj1=arguments[0]}
2.obj.onclick=function(envent){}
事件的属性:介绍几个比较常用的
IE:
altKey boolean true 按下alt健
button integer 0=未按键,
1=按下左键,
2=右健,
3=同时按左右,
4=按下中键,
5=左键+中键,
6=右键+中键,
7=三个健子一起按下
cancelBuble boolean 设置成true 会停止事件向上冒泡.
fromElement element 鼠标事件中,鼠标所离开的元素.
srcElement 引起事件的元素
toElement 鼠标事件中,鼠标所进入的元素
type string 事件的名称.
DOM中:
bubbles boolean 表示事件是否是否在冒泡阶段中
cancelable '' 表示事件能否取消.
charCode 按下健的unicode值,和IE的keyCode不一样
currentTarget 事件目前所指向的元素
detail integer 鼠标点按钮被点击的次数
eventPhase integer 1=捕获阶段,2=在目标上,3=冒泡阶段
isChar Boolean 表示按键是否时字符
preventDefault Function 调用这个方法可以终止事件的默认行为
relatedTaget 事件的第二个目标,经常用户鼠标事件.
stopPropagation 调用这个方法,组织事件将来事件的冒泡.
分享到：
相关推荐
1.事件流的区别 IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件 示例： 代码如下: <body> <div> <button>点击这里</button> </div> </body> 冒泡型事件模型： button-...
DevToolBar 和 IEDOM 都是Web开发的利器，只要装一个就好了，感觉功能差不多，为了方便起见 一起传上来了。 安装后打开IE浏览器，工具栏中出现箭头（DevToolBar）或查找（IEDOM ）的按钮，点击就可以十分方便的...
采用w3cschool里面的手册离线制作而成，相比w3school里面的手册更加详细，chm文件中的其它部分教程站点并未离线下来，需要联网...如果报脚本错误，是因为在线访问网站百度推广广告的原因，将ie的安全级别设置为高即可。
非常好的查看网页dom的javascript工具。
事件最早是在IE3和Netscape Navigator 2中出现的，当时是作为分担服务器运算负载的一种手段。 通俗地理解，事件就是用户或浏览器自身执行的某种操作。而事件处理程序即为响应某个事件的函数。抽出主干，即事件处理...
主要介绍了javascript事件捕获机制,结合实例形式分析了冒泡的原理、事件捕获、各浏览器事件处理机制与IE和DOM中的事件模型等,需要的朋友可以参考下
10.2.5 使用JavaScript处理事件 271 10.3 标准事件模型 273 10.3.1 事件传播 273 10.3.2 注册事件处理程序 274 10.3.3 设置对象的事件处理程序 276 10.3.4 事件的模块和类型 276 10.3.5 Event接口和对象 278 10.4 IE...
事件(Event)是JavaScript应用跳动的心脏，也是把所有东西粘在一起的胶水。当我们与浏览器中Web页面进行某些类型的交互时，事件就发生了。...今天的事件，它已是DOM的重要组成部分，遗憾的是，IE继续保留它最早在IE4
10．2．5 使用JavaScript处理事件 10．3 标准事件模型 10．3．1 事件传播 10．3．2 注册事件处理程序 10．3．3 设置对象的事件处理程序 10．3．4 事件的模块和类型 10．3．5 Event接口和对象 10．4 IE事件模型 ...
主要介绍了JavaScript常见事件处理程序,结合实例形式总结分析了javascript HTML事件、DOM事件、IE事件等相关处理程序与操作技巧,需要的朋友可以参考下
JS添加/删除事件在IE和支持dom浏览器分别为：attachEvent（ie中的添加事件），detachEvent（ie中的删除事件），addEventListener（支持dom浏览器中的添加事件），removeEventListener（支持dom浏览器中的删除事件）...
全书的内容比较广泛，只要是实战中用得到的东西都有涉及（核心语法、标准库、DOM、浏览器模型、外部代码库、开发工具等等）。全书的难度为中级， 比较适合对JavaScript已经有所了解、想进一步深入学习的读者，英语中...
第17章介绍了用于处理事件（以及实现这些任务的遗留技术和特定于IE的技术）的W3C DOM标准。第18章介绍了和HTML表单元素交互的DOM。第22章介绍了如何脚本化一个HTML文档的标记，以及如何为客户端Web页面添加脚本化的...
NULL 博文链接：https://hudeyong926.iteye.com/blog/458178
DOM.js是一个轻量级的快速跨浏览器（IE 8 +，FF31 +，SF5 +，CH31 +，OP24 +）库，用于DOM遍历，操纵和事件处理。 Dom.js还包括用于简化跨浏览器拖动操作的拖动库。 仅压缩并压缩了5KB！ API参考 目录 DOM遍历 ...
9.4.3 系统实现--解析和处理棋谱 9.4.4 完整的棋谱阅读器 9.5 总结 第10章 正则表达式 10.1 什么是正则表达式 10.1.1 正则表达式的概念 10.1.2 JavaScript中的正则表达式 10.2 正则...
dom选择器是一个超轻量级纯选择器, 兼容到IE5, 用法和document.querySelectorAll几乎一样. 此dom选择器超轻量, 未压缩100+行, 压缩之后3KB 如果浏览器支持document.querySelectorAll方法且查询语句正确, 则此选择器...
document.all){ //zzcv的ff ie兼容脚本 /*脚本没有解决的问题及处理: 2.IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象. 解决方法:统一使用[]获取集合类对象. 3.IE下,可以使用获取常规...