传统方式：
1.html中直接添加事件处理程序
2.js中添加on属性（把一个函数赋值给一个事件处理程序的属性）
ex： var btn=document.getElementById("sumbitBtn")
btn.onclick=showBtn;
删除事件：btn.onclik=null
总结：传统方式的优点：浏览器的兼容性比较好。
缺点：html和js代码耦合在一起，不利于修改和维护。传统方式不能添加多个事件，而且后面的事件处理程序会覆盖前面的。
现代方式：
添加事件监听(dom方式：在IE中不兼容)：addEventListener() 和 removeEventListener()
有三个参数：事件名称（不带on）,事件处理程序,boolean值（true:事件捕获方式，false:事件冒泡方式） 添加多个事件不会被覆盖
ex: 添加 btn.addEventListener('click',sayHi,false);
移除 btn.removeEventListener('click',sayHi,false);
IE兼容的事件处理程序：attachEvent() 和 detachEvent()
有两个参数：事件名称（不许带上on）,事件处理程序 (在IE中只支持事件冒泡)
ex： 添加 btn.attachEvent('onclick',sayHi)
移除 btn.detachEvent('onclick',sayHi)
总结：现代方式优点：可以添加多个事件处理程序而不被后面的事件处理程序覆盖
缺点：兼容性没有传统方式那么好，要专门为考虑兼容性再写一遍。
所以 有了兼容性写法。。。。。。。。。。。。。
function addEvent(type,handler,element)
{
if(element.attachEvent)
{
element.attachEvent('on'+type,handler);
}else
{
element.addEventListener(type,handler,false)
}
}
调用：addEvent('click',sayHi,btn);