关于前段蛋疼的地方之 IE 和网景 的缠缠绵绵 - 事件篇（1）

 

你知道前端的事件绑定机制在不同浏览器直接的区别吗？ by 面试官

我知道

$('#btn').click(function(){alert('hello world')})

事件绑定是啥，好吃吗？ by 小白程序猿

 

这前段最蛋疼的 IE678 和网景公司的恩怨情仇历史有如老太裹脚布一般的又臭又长，而前端程序猿需要解决的各种BUG其实是IE开发人员自己的错误而且再也不会去纠正了。

所以你说前段难不难，当你自己花了几天时间修正 IE的各种BUG，发现原来这些不是你的错，我想你肯定也会厌烦想吐

 

说道正题，事件绑定有两种方式,

我们先获取一个按钮

var btn = document.getElmentById('btn')

第一种 直接为 DOM元素 onclick 方法赋值

btn.onclick = function(){
    alert('hello cc')  
}

简单明了，但是我们知道js中的 函数其实也只是一个变量而已，所以这样写法当你想要绑定多个click事件的时候会出现问题

btn.onclick = function(){
    alert('a')    
}

btn.onclick = function(){
    alert('b')
}    

只会 alert  ‘ b ’出来，第一个函数被覆盖了

 

当然有好处，就是这样写取消事件绑定的时候， 只需要

btn.onclick = null

即可

并且所有浏览器都支持，不需要在乎 IE678的想法，简直酸爽 

 

不过这个严格来说算是事件添加，绑定的英文名叫做 bind ，所以正式的绑定事件我在第二篇文章再做介绍吧