DOM0级同DOM2级

DOM0级分为两个：
一是写在标签内的onclick事件；
    <button id="btn" onclick="alert('happy')">按钮</button>
二是在JS写的onclick = function() {}函数
    document.getElementById("btn").onclick = function() { alert('thanks') };

DOM2级只有一个：
监听方法，原生方法addEventListener()用于添加事件处理程序（可以添加多个事件处理程序，触发时按照添加顺序依次调用）；
   removeEventListener()用于移除事件处理程序。
        document.getElementById("btn").addEventListener("click", function(){alert("come on")} , false);
两个方法都有三个参数：
    event：表示事件名，如click；
    function: 事件处理程序函数；
    useCapture: true表示捕获阶段调用，false表示在冒泡阶段调用。

DOM2级包含3个事件：事件捕获阶段、处于目标阶段、事件冒泡阶段
    <div><a></a></div>，点击a
    捕获阶段传播: document ——> div ——> a，然后发生在a。
    冒泡阶段传播: a ——> div ——> document

区别：
如果定义两个DOM0级事件，会出现覆盖，DOM2不覆盖，会依次执行。DOM0和DOM2可以共存，不互覆盖。

<a href="#" id="hash" onclick="fn();fn1()">
    <button>返回上面进行开通</button>
</a>

<!-- 以下四个script的结果是分开执行所得 -->

<!-- 内嵌DOM0：把onclick写在标签内，都是DOM0级事件，fn和fn1依次执行。 -->
<script>
    var btn = $("#hash").get(0);
    function fn() {
        console.log('ade');
    }
    function fn1() {
        console.log('ade111');
    }
    // ade
    // ade111
</script>

<!--绑定onclick事件作为DOM0级，会覆盖行内onclick，也会覆盖前面的绑定事件-->
<script>
    var btn = $("#hash").get(0);

    btn.onclick = function () {
        console.log("111");
    }
    btn.onclick = function () {
        console.log("222");
    }
    function fn() {
        console.log('ade');
    }
    function fn1() {
        console.log('ade111');
    }
    // 222
</script>

<!--DOM2-->
<script>
    var btn = $("#hash").get(0);
    $("#hash").click(function() {
        console.log("JQ的DOM2级点击第一次");
    });

    $("#hash").click(function() {
        console.log("JQ的DOM2级点击第二次");
    });

    btn.addEventListener("click", function () {
        console.log("原生DOM2级点击第一次");
    }, false);

    btn.addEventListener("click", function () {
        console.log("原生DOM2级点击第二次");
    }, false);

    // JQ的DOM2级点击第一次
    // JQ的DOM2级点击第二次
    // 原生DOM2级点击第一次
    // 原生DOM2级点击第二次
</script>


<!--DOM0和DOM2-->
<script>
    // 作为DOM0级被调用
    function fn() {
        console.log('ade');
    }

    // 作为DOM0级被调用
    function fn1() {
        console.log('ade111');
    }

    // 作为DOM0级
    var btn = $("#hash").get(0);
    btn.onclick = function() {
        console.log('111');
    }

    // DOM0
    $('#hash').click(function() {
        console.log('JQ的DOM2级点击第一次');
    });

    // DOM2
    btn.addEventListener('click', function () {
        console.log('原生DOM2级第一次click')
    }, false);

    // 111  （fn()、fn1()被覆盖）
    // jq的DOM2级点击第一次
    // 原生DOM2级第一次click
</script>