DOM0级事件和DOM2级事件的区别

2019-02-26  本文已影响0人  月半女那

1.DOM0事件

1.1. DOM0级事件绑定 会存在覆盖的问题;下边的代码会把上边的代码覆盖
1.2. 分为两种:一种是 onclick = function(){} ,还有一种是标签内写onclick事件

 <input id='input' type="text" onclick="alert('haha')" />
        document.getElementById('input').onclick = function() {
            alert('fff')
        }

最后弹出fff

2. DOM2级事件

2.1. 只有一个:监听方法,原生有两个方法用来添加和移除事件处理程序:addEventListener()和removeEventListener()。
持绑定多个函数; 只有三个参数都相同时,才会处理称重复绑定,这时就不再往 事件池 添加,
第三个参数如果是true则表示在捕获阶段调用,为false表示在冒泡阶段调用。

 <input id='input' type="text" onclick="alert('haha')" />
    <script>
        document.getElementById('input').onclick = function() {
            alert('fff')
        };
        document.getElementById('input').addEventListener('click', function() {
            alert('mmm')
        }, true)
        document.getElementById('input').addEventListener('click', function() {
            alert('ooooo')
        }, true)
        document.getElementById('input').addEventListener('click', function() {
            alert('pppp')
        }, false)

        // 兼容低版本IE的写法
        document.getElementById('input').attachEvent("onclick", function() {
            alert('pppp')
        });
    </script>

// mmm ooooo fff pppp

只有2级DOM包含3个事件:事件捕获阶段、处于目标阶段和事件冒泡阶段

dom2不会覆盖,会依次执行,dom1和dom2是可以共存的

上一篇下一篇

猜你喜欢

热点阅读