js事件绑定方式?标准事件绑定及事件对象event的兼容性问题

js兼容性问题

1、在标准的事件绑定中绑定事件的方法函数：addEventListener,而IE使用的是attachEvent(只有IE能识别此方法);

解决IE8兼容问题

方法一：
try{
dom.addEventListener("click",function(){
alert('ok');
})
}catch(e){
dom.attachEvent("onclick",function(){
alert('ok');
}
方法二：
if(dom.addEventListener){//判断有误此属性
dom.addEventListener("click",function(){
alert('ok');
},false)
}else{
dom.attachEvent("onclick",function(){
alert("ok");
},false);//false默认冒泡时触发
}
//或者，可以把这个兼容写法封装成一个函数，用的时候直接调用就行，这样就不用每次绑定事件时都要判断一下。
function myAddEvent(obj,ev,fn) //obj为要绑定事件的元素，ev为要绑定的事件，fn为绑定事件的函数
{
if(obj.attachEvent)
{
obj.attachEvent("on" + ev,fn);
}
else
{
obj.addEventListener(ev,fn,false);
}
}

2、js中事件对象event的兼容性问题

* w3c标准规定，事件是作为函数的参数传入的，eg:

点击我将获得屏幕坐标

document.getElementById("box").onclick=function(e){// 这里函数传入的参数e,就是事件
alert(e.screenX);
}

* IE采用了一种非标准的方式，将event事件对象作为window对象的event属性:window.event

window.event.screenX

* 兼容法

点击我将获得屏幕坐标

document.getElementById("box").onclick=function(e){// 这里函数传入的参数e,就是事件
var e=e|| event;//顺序不能调换
alert(e.screenX);
}

事件绑定的几种方法

• 1.把事件绑定在元素上(把事件当做HTML元素的属性)

  <button onclick="alert("ok")">

• 2.把事件当做dom对象的方法

  
  var btn=document.getElementById("btn");
  btn.onclick=function(){
  alert("ok");
  }

• 3.事件监听方式(标准绑定方式)

  obj.addEventListener(ev,fn,false|true);
  obj.attachEvent("on"+ev,fn); //适用于IE