详细解读JavaScript的跨浏览器事件处理

编程学习 2021-07-04 21:48www.dzhlxh.cn编程入门

这篇文章主要介绍了JavaScript的跨浏览器事件处理,以全浏览器兼容为大致目标,需要的朋友可以参考下

一.关于获取事件对象

FF有点倔强，只支持arguments[0]，不支持window.event。这次真的不怪IE，虽然把event作为window的属性不合规范，但大家都已经默许这个小问题存在了，只有FF这么多年了还是特立独行。所以，跨浏览器的事件对象获取有以下两种方式：

带参的：

getEvent : function(event){
  return event ? event : window.event;
  //return event || window.event;//或者更简单的方式
}

无参的：

function getEvent() {
  return arguments[0] ? arguments[0] : window.event;
  //return arguments[0] || window.event;//或者更简单的方式
}

需要特别说明一种方式：HTML的DOM0级方式 + 带参的事件处理器，如下：

function handler(event){
  //do something
}
<!-- HTML的DOM0级方式 -->
<button id="btn" onclick="handler(event);">按钮</button>

上面这种方式是全浏览器兼容的，但依赖HTML的DOM0级方式的缺点很明显，所以没能成为像前两种那样的主流方法，而JS的DOM0级方式 + 带参的事件处理器，如下：

function handler(event){
  //do something
}
btn.onclick = handler;//JS的DOM0级方式
//btn.onclick = function(event){/*do something*