全回顾扫盲js之DOM0与DOM2

DOM0是对旧版本方法的俗称,包括onclick、onmouseover、onmouseout等,方法会被覆盖

<\div id="container" data-ke-onclick="console.log(1111111)">aaaaaaaaa<\/div>

document.getElementById('container').onclick = function () {
    console.log('22222222')
}
document.getElementById('container').onclick = function () {
    console.log('333333')
}

这里只执行了一次,后面的方法把前面的方法覆盖了。

DOM2添加了事件监听机制-》addEventListener ,这个属性接受三个参数,事件、方法、布尔值。事件监听不会覆盖。

更多关于事件流,点这里

var Dom = document.getElementById('container')
Dom.addEventListener('click', function () {
    console.log(11)
}, false)
Dom.addEventListener('click', function () {
    console.log(22)
}, false)

这里就执行了两次,说明dom2的事件监听机制是不会覆盖的,猜测应该是放到了队列里依次执行的。

随机浏览