首页 > 代码库 > js事件绑定/监听

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

js事件绑定/监听