事件处理程序和跨浏览器的解决方案

1.HTML事件处理程序
<input type="button" value="按钮" id="btn" onclick="alert('hello')">或者
<input type="button" value="按钮" id="btn" onclick="showMessage()"> <script> function showMessage(){ alert('hello world') }</script>
缺点：HTML和JS代码紧密的耦合在一起
2.DOM 0级处理程序
较传统的方式：把一个函数赋值给一个事件处理程序属性。
用的比较多 简单 跨浏览器的优势

<input type="button" value="按钮2" id="btn2">
<script>
var btn2=documentgetElementById('btn2')
btn2.onclick=function(){
     alert('hello world')
}
//删除事件
btn2.onclick=null;
</script>

3.DOM 2级处理程序
DOM级事件定义了两个方法：用于处理指定和删除事件处理程序操作
addEventListener()和removeEventListener()
接收三个参数：要处理的事件名（去掉on）、作为事件处理程序的函数和布尔值（true代表捕获阶段、false代表冒泡阶段）
DOM 0和DOM 2可以为元素添加多个事件处理程序
this可以引用被触发的元素

<input type="button" value="按钮3" id="btn3">

<script>
function showMessage(){
     alert('hello world')
}
var btn3=documentgetElementById('btn3')
//插入事件
btn3.addEventListener('click' showMessage false);
//删除事件
btn3.removeEventListener('click' showMessage false);
</script>

4.IE事件处理程序
attachEvent()添加事件
detachEvent()删除事件、
接受相同的两个参数：事件处理程序的名称，事件处理程序函数
不使用布尔值的原因：IE8以及更早的浏览器只支持时间冒泡
支持IE事件处理程序的浏览器只有IE和OPERA

btn3.attachEvent("onclick",showMes);
btn3.deachEvent("onclick",showMes);

5.跨浏览器的事件处理程序

var eventUtil={
    //添加句柄
    addHandler:function(element,type,handler){
           if(element.addEventListener){
                element.addEventListener(type,handler,false);
                    }
           else if(element.attachEvent){
                    element.attachEvent('on'+type,handler);
                        }
           else{
                  //element.onclick===element['onclick']
//                //字符串+变量中间不能用.
                  element['on'+type]=handler;
                     }
           }

//删除句柄
    removeHandler:function(element,type,handler){
           if(element.removeEventListener){
                element.removeEventListener(type,handler,false);
                    }
           else if(element.detachEvent)｛
                    element.detachEvent('on'+type,handler);
                         }
           else{
                  //element.onclick===element['onclick']
//                //字符串+变量中间不能用.
                  element['on'+type]=null;
                     }
           }
}
eventUtil.addHandler(btn3,'click',showMes);