js事件的机制

1、html事件处理程序

<button id="btn1" onclick="alert(1);">按钮1</button>

2、dom0级事件处理程序

<button id="btn2">按钮2</button>
document.getElementById("btn2").onclick=function(){alert(2);};
document.getElementById("btn2").onclick=null;    //取消事件

3、dom2级事件处理程序 优点支持多个事件绑定

<button id="btn3">按钮3</button>
<script type="text/javascript">
    function btn3(){
        alert(3);
    }
    document.getElementById('btn3').addEventListener('click','btn3',false);
    document.getElementById('btn3').removeEventListener('click','btn3',false);
    //移除事件 document.getElementById('btn3').addEventListener('click',function(){alert(33);}); //可以添加多个事件绑定
    

兼容性问题：chrome支持addEventListener，ie支持attachEvent

<button id="btn3">按钮3</button>
<script type="text/javascript">
    function btn3(){
        alert(3);
    }
    document.getElementById("btn3").attachEvent('onclick',btn3);
    document.getElementById("btn3").detachEvent('onclick',btn3);

支持chrome和低版本ie的:

<button id="btn3">按钮3</button>
<script type="text/javascript">
    function btn3(){
        alert(3);
    }
    var eventUtil = {
        addHandler:function(element,type,handler){
            if(element.addEventListener)
            {
                element.addEventListener(type,handler,false);      //chrome dom2级
            }else if(element.attachEvent)
            {
                element.attachEvent('on'+type,handler)           //ie  dom2级
            }else
            {
                element['on'+type]=handler;                        //dom0级
            }
        },
        removeHandler:function(element,type,handler){
            if(element.removeEventListener)
            {
                element.removeEventListener(type,handler,false);
            }else if(element.detachEvent)
            {
                element.detachEvent('on'+type,handler)
            }else
            {
                element['on'+type]=null;
            }
        }
    }
    eventUtil.addHandler(document.getElementById("btn3"),'click',btn3);
    eventUtil.removeHandler(document.getElementById("btn3"),'click',btn3);

</script>

事件对象 eventUtil.addHandler(document.getElementById("btn3"),'click',btn3);

    function btn3(event){
        alert(event.target); //获取事件目标 [object HTMLButtonElement]
        alert(event.type);   //获取事件类型 click
    }

冒泡机制 ：当你点击btn3的时候会调用btn3函数和box函数。事件从button冒泡到div上

<div id="box">
    <button id="btn3">按钮3</button>
</div>
<script type="text/javascript">
    function btn3(event){
        alert(event.target.nodename); //获取事件目标 button
        alert(event.type);   //获取事件类型 click
    }
    function box(){
        alert('this is box');
    }
    eventUtil.addHandler(document.getElementById("btn3"),'click',btn3);
    eventUtil.addHandler(document.getElementById("box"),'click',box);

阻止事件冒泡：通过event.stopPropagation();实现

<div id="box">
    <button id="btn3">按钮3</button>
</div>
<script type="text/javascript">
    function btn3(event){
        alert(event.target.nodeName); //获取事件目标 [object HTMLButtonElement]
        event.stopPropagation();
        // alert(event.type);   //获取事件类型 click
    }
    function box(){
        alert('this is box');
    }
    eventUtil.addHandler(document.getElementById("btn3"),'click',btn3);
    eventUtil.addHandler(document.getElementById("box"),'click',box);

阻止事件的默认行为，event.preventDefault();这样点击go，就不会发生跳转了

<a href="http://www.baidu.com" id='go'>go</a>
<script>
    function stopgo(event){
        event.stopPropagation();
        event.preventDefault();
    }
eventUtil.addHandler(document.getElementById("go"),'click',stopgo);

兼容性问题封装到evenUtil中

getEvent:function(event)
        {
            return event?event:window.event;  //window.event ie
        },
        getType:function(event)
        {
            return event.type;
        },
        getElement:function(event)
        {
            return event.target||event.srcElement;       //event.srcElement ie
        },
        preventDefault:function(event)
        {
            if(event.preventDefault)
            {
                event.preventDefault();
            }else{
                event.returnValue=false;         //ie
            }
        },
        stopPropagation:function(event)
        {
            if(event.stopPropagation)
            {
                event.stopPropagation();
            }else
            {
                event.cancleBubble=true  //ie
            }
        }

　　//调用

　　eventUtil.addHandler(document.getElementById("go"),'click',function(e){
　　e=eventUtil.getEvent(e); //也可以写成 e=e||window.e
　　alert(eventUtil.getElement(e));
　　eventUtil.preventDefault(e);
　　eventUtil.stopPropagation(e);
　　});

参考文章：

https://www.imooc.com/video/2162