js事件绑定/监听

事件绑定/监听的方法

1.直接绑定

顾名思义，直接在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等事件

var ul = document.getElementById('ul')
console.log(ul)
ul.onclick = function() {
    console.log('click 事件绑定成功')
}

这种方法最简单，也是DOM level0最早支持的一种方法。但是这个方法存在一个很大的问题。那就是如果一个元素绑定事件时，有可能覆盖掉前面已经绑定好的事件！尤其是存在多个js文件时。为了解决这个问题，level2新增了事件监听

2.事件监听

事件监听实现的功能和直接绑定差不多，但是新增了一个特点。那就是无论监听次，都不会覆盖掉前面的监听事件。本质原因是监听事件每次都会生产一个全新的匿名函数，和前面的函数完全不同，自然不会覆盖。

var ul = document.getElementById('ul')
        ul.addEventListener('click', function() {
            console.log('事件绑定成功1')
        })
        ul.addEventListener('click', function() {
            console.log('事件绑定成功2')
        })