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') })