JavaScript事件监听是指在某个元素上监听特定事件的触发,并在事件触发时执行相应的函数。事件可以是用户的鼠标操作、键盘操作、页面加载等等。
在JavaScript中,可以使用addEventListener方法来添加事件监听器。它接受三个参数:事件类型、要执行的函数、以及一个布尔值,用于指定事件是在捕获阶段还是冒泡阶段触发。通常我们会将最后一个参数设为false,表示在冒泡阶段触发事件。
下面是一个简单的代码示例,演示如何使用addEventListener方法添加点击事件监听器:
const button = document.querySelector('button');function handleClick() {console.log('Button clicked!');
}button.addEventListener('click', handleClick);
在上面的代码中,我们首先通过querySelector方法获取到一个button元素,并将其存储在一个变量中。然后我们定义了一个handleClick函数,当按钮被点击时,该函数会被执行。
接下来,我们使用addEventListener方法为按钮元素添加了一个click事件监听器,并将handleClick函数作为处理函数传入。这样,当按钮被点击时,handleClick函数就会被调用,并在控制台打印出'Button clicked!'。
除了click事件之外,还有很多其他常见的事件类型,例如mouseover、mouseout、keydown、keyup等等。你可以根据需要选择合适的事件类型来添加监听器。
除了使用addEventListener方法,还可以使用on事件属性来添加事件监听器。例如,可以使用onclick属性来添加点击事件监听器:
const button = document.querySelector('button');function handleClick() {console.log('Button clicked!');
}button.onclick = handleClick;
使用on事件属性添加事件监听器的语法比较简单,但是它有一个缺点:每个事件只能设置一个处理函数。如果需要添加多个处理函数,就需要使用addEventListener方法。