一个事件其实在页面上 有多个元素相应事件处理,点击页面上的一个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 调用这个方法,组织事件将来事件的冒泡.
分享到：
相关推荐
JavaScript中的事件处理在不同的浏览器环境下，尤其是Internet Explorer (IE) 和遵循Document Object Model (DOM) 规范的浏览器之间存在显著差异。以下是这些差异的详细解释： 1. **事件流的区别**： - **IE冒泡型...
实验报告详细介绍了JavaScript事件处理的相关知识，这在Web开发中是非常关键的一部分，因为事件是用户与网页交互的主要方式。以下是对各个知识点的详细说明： 1. **JavaScript事件基本概念**： - **事件**：是用户...
总结来说，"IEdom查看javascript工具"是前端开发者在使用Internet Explorer时的得力助手，通过它，我们可以更高效地进行网页开发和调试工作，提高工作效率，同时加深对DOM和JavaScript的理解。在不断发展的Web技术...
为 DOM 绑定事件需要考虑浏览器的兼容性问题，我们可以使用不同的方式来绑定事件，包括直接为 Element 对象绑定事件、使用 W3C 的 addEventListener 和 IE 的 attachEvent 方法，以及自定义绑定函数等。
IE DOM查看器是开发人员在IE环境下调试和优化网页布局、事件处理以及动态内容更新的重要工具。 **描述：“在IE下面DOM查看，很方便，也很容易上手”** 在IE浏览器中，DOM查看器的易用性使得初学者也能快速掌握其...
2. **事件处理**：在IE和Firefox中，事件处理方式有所不同。IE早期版本使用`attachEvent`和`detachEvent`，而Firefox等其他浏览器使用`addEventListener`和`removeEventListener`。开发者需注意这两种方式的互换。 ...
为了确保代码的健壮性和跨浏览器兼容性，开发者需要对各种浏览器的事件处理机制有深入的理解，包括DOM0级、DOM2级事件处理以及IE特有事件模型。同时，通过持续实践和测试，可以避免这些低级错误，提高代码质量。在...
本文详细介绍了JavaScript事件处理模型，重点讲述了Internet Explorer（IE）和Mozilla Firefox（火狐）这两款主流浏览器在添加和删除事件监听器方面的差异，以及提供了一个通用的解决方案，从而允许开发者能够编写...
在W3C规范出台之前，JavaScript事件机制在IE和Netscape浏览器中有两种不同的处理方式：冒泡和捕获。IE采用冒泡模型，事件从子元素向上冒泡到父元素；Netscape则采用捕获模型，事件从父元素向下捕获到子元素。W3C标准...
DevToolBar 和 IEDOM 都是Web开发的利器，只要装一个就好了，感觉功能差不多，为了方便起见 一起传上来了。 安装后打开IE浏览器，工具栏中出现箭头（DevToolBar）或查找（IEDOM ）的按钮，点击就可以十分方便的...
8. **DOM Level 2和Level 3**：除了基本的DOM Level 1，书中还介绍了更高级的DOM Level 2（如CSS选择器支持、遍历和范围接口）和DOM Level 3（如事件模型、核心DOM接口和XML DOM接口）。 9. **实践项目**：源码中的...
1. **核心DOM**：定义了处理任何类型的文档的基本功能，如创建和操作节点，以及事件处理机制。 2. **HTML DOM**：专门为HTML文档设计的DOM实现，包含了HTML特有的元素和属性。 3. **XML DOM**：用于处理XML文档的DOM...
《JavaScript DOM编程艺术》这本书虽然只有四章内容，但涵盖了DOM的基础概念、操作技术、事件处理以及高级编程技术等多个方面，对于想要深入了解DOM操作的开发者来说是非常宝贵的资源。通过学习这些知识点，开发者...
JavaScript 事件模型是Web开发中的核心概念，它定义了如何处理和响应用户或浏览器的交互。ECMAScript规范中的ECMA-357是与事件处理相关的一部分，它提供了JavaScript中处理事件的标准。 事件流是JavaScript事件模型...
为了兼容各种浏览器，通常需要编写跨浏览器的事件处理程序，结合DOM2级和IE的方法。 ```javascript function addEvent(element, event, handler) { if (element.addEventListener) { element.addEventListener...
在标准模式下，IE8及以下版本不支持通过`setAttribute`直接为元素添加事件监听器，这与现代浏览器如Chrome和Firefox存在差异。为了确保兼容性，通常推荐使用`addEventListener`方法为元素添加事件监听器，但由于IE8...
在JavaScript中，主要存在五种事件处理方式，分别是HTML事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序、IE事件处理程序以及跨浏览器的事件处理程序。 第一部分，HTML事件处理程序是最基础的形式，它直接在...