事件和事件处理函数-编程入门课：Javascript从入门到实战

当前位置:　首页>> 技术小册>> 编程入门课：Javascript从入门到实战

JavaScript中的事件和事件处理函数是实现交互的关键。事件是浏览器或用户执行的某个动作，例如点击鼠标、滚动窗口、按下键盘等，而事件处理函数则是在事件发生时执行的JavaScript代码。

JavaScript事件处理函数的创建和使用是基于回调函数的概念。我们可以在事件发生时定义一个回调函数，该函数将在事件发生时执行。下面是一些常见的事件和它们的处理函数：

点击事件（click）：当用户点击某个元素时触发，常用于实现按钮的点击效果、链接的跳转等。
```
<button id="my-button">Click me</button>
<script>
  const button = document.getElementById('my-button');
  button.addEventListener('click', function() {
    alert('Button clicked!');
  });
</script>
```
鼠标移动事件（mousemove）：当用户在元素内移动鼠标时触发，常用于实现鼠标悬停效果、拖拽效果等。
```
<div id="my-div" style="width: 100px; height: 100px; background-color: red;"></div>
<script>
  const div = document.getElementById('my-div');
  div.addEventListener('mousemove', function(event) {
    const x = event.clientX;
    const y = event.clientY;
    console.log(`Mouse moved to (${x}, ${y})`);
  });
</script>
```
键盘事件（keydown、keyup）：当用户按下或释放键盘上的某个键时触发，常用于实现键盘快捷键等。
```
<input id="my-input" type="text">
<script>
  const input = document.getElementById('my-input');
  input.addEventListener('keydown', function(event) {
    console.log(`Key '${event.key}' pressed`);
  });
  input.addEventListener('keyup', function(event) {
    console.log(`Key '${event.key}' released`);
  });
</script>
```
除了上面列举的事件外，还有许多其他的事件，例如窗口大小改变事件（resize）、滚动事件（scroll）、表单提交事件（submit）等等。我们可以通过addEventListener方法来给元素添加事件监听器，例如：

```
<div id="my-div"></div>
<script>
  const div = document.getElementById('my-div');
  div.addEventListener('click', function(event) {
    console.log('Div clicked');
  });
</script>
```
在这个例子中，我们给一个div元素添加了一个点击事件监听器。当用户点击该元素时，控制台将输出'Div clicked'。

事件处理函数中的event参数是一个事件对象，它包含了关于该事件的一些信息。例如，对于鼠标移动事件，event对象中包含了鼠标当前的坐标；对于键盘事件，event对象中包含了按下的键的信息等等。

除了addEventListener方法外，我们还可以使用onXXX属性来添加事件处理函数。例如，以下两种方式都可以实现相同的效果：

```
<button id="my-button">Click me</button>
<script>
  const button = document.getElementById('my-button');
button.onclick = function() {
alert('Button clicked!');
};
</script>
```

在这个例子中，我们使用了按钮的onclick属性来添加了一个点击事件处理函数。当用户点击该按钮时，将弹出一个警告框。

需要注意的是，使用onXXX属性添加事件处理函数只能添加一个处理函数，如果需要添加多个处理函数，则必须使用addEventListener方法。

事件处理函数中的this关键字指向触发事件的元素。例如：

```html
<button id="my-button">Click me</button>
<script>
  const button = document.getElementById('my-button');
  button.addEventListener('click', function() {
    console.log(this);
  });
</script>
```
在这个例子中，当用户点击按钮时，事件处理函数将把按钮元素打印到控制台上。

事件处理函数中的return false语句可以阻止事件的默认行为。例如，在一个表单元素上添加submit事件处理函数时，可以使用return false语句来阻止表单的提交：

```
<form id="my-form">
  <input type="text">
  <button type="submit">Submit</button>
</form>
<script>
  const form = document.getElementById('my-form');
  form.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止默认行为
    console.log('Form submitted');
    return false; // 阻止默认行为
  });
</script>
```
在这个例子中，当用户点击表单中的提交按钮时，事件处理函数将阻止表单的提交，并将'Form submitted'打印到控制台上。

JavaScript事件和事件处理函数是实现交互的关键。通过给元素添加事件监听器，我们可以响应用户的各种操作，并进行相应的处理。在实际开发中，合理使用事件和事件处理函数可以大大提高用户体验和页面的交互性。

该分类下的相关小册推荐：

web前端开发性能优化实战

深入学习前端重构知识体系

Javascript重点难点实例精讲（一）

ES6入门指南

Javascript编程指南

javascript设计模式原理与实战

JavaScript面试指南

剑指javascript

npm script实战构建前端工作流

KnockoutJS入门指南

JavaScript入门与进阶

剑指javascript-ES6