三种事件绑定的异同

一.javascript

广义javaScript： ECMAScript+Dom+Bom DOM0 DOM2
狭义javaScript： ECMAScript ES6 ES5 ES3

二.js的三种事件

html事件：
    <button onclick="fun()"></button>
    function fun(){
        alert('111')
    }
dom0级事件（事件绑定）：
    <button id="btn"></button>
    document.getElementById('btn').onclick=function(){
        alert('111')
    }
dom2级事件（事件监听）：
    element.addEventListener(event,function,useCapture)
    event:事件名（必需）
    function:方法（必需）
    useCapture（可选）:指定事件是否在捕获或冒泡阶段执行。true：捕获，false：冒泡。默认false
    IE8:element.attachEvent(event,function)
    代码：
        document.getElementById("btn").addEventListener("click",fun2)
        function fun2(){
            alert('111')
        }

三.事件监听和事件绑定的异同

事件监听可以绑定多个事件，事件绑定只执行最后绑定的事件（相同事件）
原因：js不支持事件重载，绑定事件相当于一个变量储存的是函数的地址
如果再绑定一个事件，相当于变量指向一个地址
事件监听相当于订阅发布者，改变了数据，触发了事件，订阅这个事件的函数被执行
比如：
     document.getElementById('btn').onclick=function(){
        alert('111')
    }
     document.getElementById('btn').onclick=function(){
        alert('111')
    }
    事件绑定同一个元素上绑定两个事件则只执行一次
     document.getElementById("btn").addEventListener("click",fun2)
     document.getElementById("btn").addEventListener("click",fun3)
     事件绑定则会执行两次