JavaScript有哪些事件和事件处理

目录

JavaScript中的事件

事件处理程序

事件流和事件委托

事件取消

---

JavaScript中的事件

在JavaScript中，事件是用户或浏览器执行的某些操作或发生的某些事情，例如点击按钮、滚动页面或加载页面。每种动作都对应一种事件类型，常见的事件类型包括但不限于：

• click：用户点击元素时触发。
• mouseover/mouseout：鼠标指针移入/移出元素时触发。
• keydown/keyup/keypress：用户按下一个键时触发的一系列事件。
• change：表单元素的值发生变化时触发。
• submit：表单提交时触发。
• load/unload：页面加载/卸载完成时触发。

事件处理程序

事件处理程序是一个JavaScript函数，它会在特定事件发生时被调用。在JavaScript中，有几种方法可以将事件处理程序添加到元素上：

1. HTML事件处理程序：在HTML元素的属性中直接定义事件处理程序，例如<button onclick="alert('Clicked')">Click Me</button>。

2. DOM0级事件处理程序：通过JavaScript将一个函数赋值给一个事件处理程序属性。例如，要将点击事件处理程序添加到一个按钮上，可以写成var btn = document.getElementById('myBtn'); btn.onclick = function() { alert('Clicked'); };。

3. addEventListener：使用addEventListener方法将事件处理程序添加到元素上，可以同时添加多个事件处理程序，例如button.addEventListener('click', function() { console.log('Button clicked!'); });。

事件流和事件委托

事件流描述了从页面接收事件的顺序，主要有两种模型：冒泡型和捕获型。冒泡型事件是从子元素开始，逐级向上传递，直至传递到根元素；捕获型事件则是从根元素开始，向下逐级传递到触发事件的元素。

事件委托是一种优化事件处理的技术，它利用了事件冒泡的特性。通过将事件监听器添加到父元素上，而不是每个子元素上，可以减少内存消耗，并且对于动态添加的元素，无需单独为其添加事件监听器。

事件取消

在某些情况下，你可能希望阻止事件的默认行为或阻止事件继续传播。这可以通过调用事件对象的preventDefault()方法和stopPropagation()方法来实现。