事件和事件处理函数-编程入门课：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关键字指向触发事件的元素。例如：

<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>