JS中跨浏览器兼容的添加事件

今天来讲讲跨浏览器兼容的添加事件。
先来讲一讲HTML 的添加事件，原代码是这样的：

这是一个盒子

，如果在HTML 中添加事件，是这样的：

<div  id ="box "  onclick ="danji (3，5)">这是一个盒子</div >
function  danji (num 1,num 2){
         alert (num 1+num 2);
}

或者还可以这样表达：

<div  id ="box "  onclick ="alert (     danji (3，5)      )">这是一个盒子</div >
function . danji (num 1,num 2){
        return    num 1+num 2;
}

但是有一个值得注意的地方:后面执行的代码会覆盖前面的代码，例如:

<div  id ="box "   onclick ="danji ()">这是一个盒子</div >
function  danji (num 1,num 2){
          alert (num 1+num 2);
}
danji (3，5);
function  danji (num 1,num 2){
        alert (num 1+num 2);
}
danji (4，6);

如果单击该行字会弹出后面那个答案：10；因为会覆盖前面的代码执行。
如果要修改数据的话，其耦合性也使得它很麻烦，因为要改变js 代码可能前面的HTML 那块的代码也要发生改变，所以其耦合性不好。

再来看一下dom 0级事件的添加：
即我们一般所学的正常的写法：

var  box =document. getElementById ("box ");
box. onclick =function (){
      alert (1)；
}

单击这行字会弹出1，不过和上面一样的，也会有覆盖现象，例如：

box. onclick =function (){
        alert (2);
}

单击之后只会弹出2；

再来看看dom 2级事件的添加：
应用于IE 9及10，8及8以下不兼容，

box. addEventListener (事件名称，函数，false |true ),例如：
box. addEventListener ("click ",function (){
          alert (1);
},false )

这里的false 指的是冒泡，true 表示捕获。一般情况下写false, 指的是冒泡，放在8及以下会不兼容。

再来看一下IE 8及以下的应用：

box. attachEvent (事件名称，函数)，例如：
box. attachEvent ("onclick ",function (){
          alert (1);
})

跨浏览器的任何平台都能执行的一添加事件代码：(做兼容)

function  setEvent (dom, evt, fn ){
          if (dom.  addEventListener ){
                   dom. addEventListener (evt, fn, false );
}else if (dom. attachEvent ){
           dom. attachEvent ("on "+evt, fn );
}else{
           dom ["on"+evt ]=fn; //相当于dom. onclick =function (){}
}
}
setEvent (box, "click ",function (){
        alert (1);
})
setEvent (box, "click ",function (){
        alert (2);
})

这样兼容的话弹框在任何平台都能弹出1和2。

到此结束啦！喜欢的记得下方评论呀！