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>

巴特西

DOM0级同DOM2级

最新文章

热门文章