深入解析DOM事件机制及应用-优快云博客

事件对象还提供一个.stopPropagation()方法，可以完全阻止事件冒泡。与.target类似，这个方法也是一种纯JS特性，但是在跨浏览器环境中则无法安全的使用(即在IE中停止冒泡应该使用事件对象的cancelBubble属性设置为false)，不过通过jQuery来注册所有的事件处理程序，就可以放心地使用这个方法。

三、关于事件的起泡的概念

IE中事件的起泡：IE中事件可以沿着包容层次一点点起泡到上层，也就是说，下层的DOM节点定义的事件处理函数，到了上层的节点如果还有和下层相同事件类型的事件处理函数，那么上层的事件处理函数也会执行。例如，<div>标签包含了<a>，如果这两个标签都有 onclick事件的处理函数，那么执行的情况就是先执行<a>标签的onclick事件处理函数，再执行<div>的事件处理函数。如果希望<a>的事件处理函数执行完毕之后，不希望执行上层的<div>的onclick的事件处理函数了，那么就把 cancelBubble设置为false即可。

FF运载标准事件模型（即同时支持捕获和冒泡），要把事件处理注册到捕获阶段，必须在标准的事件注册方法addEventListener()中将最后一个参数设置为true。
IE的事件注册方法attachEvent()只能将事件处理程序注册到冒泡阶段。
为了提供跨浏览器兼容性，jQuery始终会在模型的冒泡阶段注册事件处理程序（即为了和IE兼容啊。。），因此，我们总是可以假定最具体的元素会首先获得响应事件的机会。

[javascript] IE与火狐下window.event对象的区别

window.event
IE：有window.event对象
FF：没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event)

鼠标当前坐标
IE：event.x和event.y。
FF：event.pageX和event.pageY。
通用：两者都有event.clientX和event.clientY属性。

鼠标当前坐标(加上滚动条滚过的距离)
IE：event.offsetX和event.offsetY。
FF：event.layerX和event.layerY。

标签的x和y的坐标位置：style.posLeft 和 style.posTop
IE：有。
FF：没有。
通用：object.offsetLeft 和 object.offsetTop。

窗体的高度和宽度
IE：document.body.offsetWidth和document.body.offsetHeight。注意：此时页面一定要有body标签。
FF：window.innerWidth和window.innerHegiht，以及document.documentElement.clientWidth和document.documentElement.clientHeight。
通用：document.body.clientWidth和document.body.clientHeight。

添加事件
IE：element.attachEvent(”onclick”, func);。
FF：element.addEventListener(”click”, func, true)。
通用：element.onclick=func。虽然都可以使用onclick事件，但是onclick和上面两种方法的效果是不一样的，onclick只有执行一个过程，而attachEvent和addEventListener执行的是一个过程列表，也就是多个过程。例如：element.attachEvent(”onclick”, func1);element.attachEvent(”onclick”, func2)这样func1和func2都会被执行。

标签的自定义属性
IE：如果给标签div1定义了一个属性value，可以div1.value和div1[”value”]取得该值。
FF：不能用div1.value和div1[”value”]取。
通用：div1.getAttribute(”value”)。

父节点、子节点和删除节点
IE：parentElement、parement.children，element.romoveNode(true)。
FF：parentNode、parentNode.childNodes，node.parentNode.removeChild(node)。

IE,FireFox中的事件Event对象

event代表事件的状态，专门负责对事件的处理，它的属性和方法能帮助我们完成很多和用户交互的操作;

一、Event对象的主要属性和方法
　　

1.type：事件的类型，就是HTML标签属性中，没有“on”前缀之后的字符串，例如“Click”就代表单击事件。

　　2.srcElement：事件源，就是发生事件的元素。比如<a onclick="check()"></a> a这个链接是事件发生的源头，也就是该事件的srcElement。(非IE中用target)

　　3.button：声明了被按下的鼠标键，是一个整数。0代表没有按键，1代表鼠标左键，2代表鼠标右键，4代表鼠标的中间键，如果按下了多个鼠标键，就把这些值加在一起，所以3就代表左右键同时按下。

　　4.clientX/clientY：是指事件发生的时候，鼠标的横、纵坐标，返回的是整数，它们的值是相对于包容窗口的左上角生成的。

　　5.offsetX/offsetY：鼠标指针相对于源元素的位置，可以确定单击Image对象的哪个象素。

　　6.altKey，ctrlKey，shiftKey：顾名思义，这些属性是指鼠标事件发生的时候，是否同时按住了Alt、Ctrl或者Shift键，返回的是一个布尔值。

　　7.keyCode：返回keydown和keyup事件发生的时候，按键的代码以及keypress事件的Unicode字符。比如event.keyCode=13代表按下了回车键；

　　8.fromElement、toElement前者是指代mouseover事件移动过的文档元素，后者指代mouseout事件中鼠标移动到的文档元素。

　　9.cancelBubble：一个布尔属性，把它设置为true的时候，将停止事件进一步起泡到包容层次的元素，它用于检测是否接受上层元素的事件的控制。true代表不被上层元素的事件控制，false代表允许被上层元素的事件控制。

　　10.returnValue：一个布尔值属性，设置为false的时候可以阻止浏览器执行默认的事件动作，相当于<a href=”#” onclick=”ProcessMethod();return false;” />。

11.attachEvent()和detachEvent()方法：为制定DOM对象事件类型注册多个事件处理函数的方法，它们有两个参数，第一个是事件类型，第二个是事件处理函数。在attachEvent()事件执行的时候，this关键字指向的是window对象，而不是发生事件的那个元素。

转载于:https://www.cnblogs.com/chris-oil/archive/2012/08/09/2630382.html