IE和firefox浏览器的event事件兼容性汇总

以下是针对“IE和firefox浏览器的event事件兼容性汇总”的完整攻略。

1. 了解IE和Firefox浏览器的事件模型差异

在IE浏览器中，事件模型采用的是Bubbling冒泡型事件，而在Firefox浏览器中，采用的是Capturing捕获型事件。

Bubbling模型是从事件所触发的元素开始向外层元素（即document对象）传递，而Capturing模型则相反，是从document对象开始向内层元素传递，到事件所触发的元素。

这会导致在IE和Firefox上，事件处理的顺序是不同的。因此，在编写事件处理程序时，需要特别注意IE和Firefox的事件模型差异，以确保代码在两个浏览器中都能正确地执行。

2. 为事件处理程序绑定事件

在IE浏览器中，可以通过DOM0级方式或DOM2级方式来为元素绑定事件处理程序。而在Firefox浏览器中，只能通过DOM2级方式来绑定事件处理程序。

DOM0级方式绑定事件：

var btn = document.getElementById('btn');
btn.onclick = function() {
  alert('clicked!');
};

DOM2级方式绑定事件：

var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  alert('clicked!');
}, false);

示例一：事件对象属性差异

在IE浏览器和Firefox浏览器中，事件对象的属性有所不同。比如，在IE浏览器中，可以通过window.event来访问事件对象，而在Firefox浏览器中，需要通过事件处理程序的参数来访问事件对象。

var btn = document.getElementById('btn');
btn.onclick = function() {
  var e = window.event || arguments[0];
  alert(e.type); // 在IE和Firefox中都能正确输出事件的类型
};

var btn = document.getElementById('btn');
btn.addEventListener('click', function(e) {
  alert(e.type); // 在Firefox中能正确输出事件的类型，在IE中则会报错
}, false);

示例二：事件处理顺序差异

在IE浏览器中，事件处理程序的顺序采用的是Bubbling模型，而在Firefox浏览器中，则是Capturing模型。因此，在IE浏览器中，事件会从内层元素开始传递到外层元素，而在Firefox浏览器中，则相反。

<div id="outer">
  <div id="inner">
    <button id="btn">Click me</button>
  </div>
</div>

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var btn = document.getElementById('btn');

outer.addEventListener('click', function() {
  alert('outer clicked!'); // 在Firefox浏览器中，会先调用outer的事件处理程序
}, true);

inner.addEventListener('click', function() {
  alert('inner clicked!'); // 在Firefox浏览器中，会后调用inner的事件处理程序
}, true);

btn.addEventListener('click', function() {
  alert('btn clicked!'); // 在Firefox浏览器中，会最后调用按钮的事件处理程序
}, true);

在上述示例中，我们绑定了三个事件处理程序，分别是outer、inner和按钮元素上的点击事件。在Firefox浏览器中，会先调用outer元素的事件处理程序，然后调用inner元素的事件处理程序，最后才会调用按钮元素的事件处理程序。而在IE浏览器中，则相反。

这说明我们需要注意通过事件处理程序绑定事件时，采用的是Bubbling还是Capturing模型，以确保事件处理程序能够按照期望的顺序被调用。

希望以上内容能够对你有所帮助，谢谢。