dom三种事件绑定的异同

广义javascript ECMAScript + DOM + BOM DOM0 DOM1 DOM2

狭义javascript ECMAScript ES6 ES5 ES3

1. html事件

    <div onclik="fn()"></div>

    function fn() {

   　　alert("hello world");

    };

2. dom0 级 事件绑定

    <div id="app"></div>

     var appDom  = document.getElementById("app");

     appDom.onClick = function() { alert("hello world2");}

3. dom2 级 事件监听

    // element.addEventListener(event, fucntion, useCapture) 

   // removeEventListener 对事件都移除

    // event : 必须 事件名，支持dom所有的事件

    // function: 必须 指定要事件触发执行的函数

   // useCapture: 可选 指定事件是否需要在捕获或者冒泡阶段执行。 true 捕获  false 冒泡  默认false

   // IE8: element.attachEvent(event,function)

   // event: 必须 事件类型。 需要加“on”,例如 onclick

   // fucntion 必须 指定需要事件触发事执行的函数

   document.getElementById("app").addEventListener("click", function(){

　　alert("hello world3");

   });

4. 事件绑定与事件监听的优缺点

    （1）事件监听的优点：可以绑定多个事件

             常规的事件绑定只会执行最后一次的事件

    （2）原因：js 不支持事件重载

                       事件绑定相当于一个变量存储的是函数的地址，如果再绑定一个地址，相当于变量指向另一个函数的地址；

                       事件监听相当于订阅发布者，改变了数据，触发了事件，订阅的这个事件函数将会被执行