javascript事件

JavaScript 事件

基本概念

  • 事件是文档或浏览器窗口中发生的某个特定瞬间。
  • 比如按钮点击、鼠标经过、输入框获得焦点、页面加载等都属于事件。

常见事件

  • onClick：点击事件
  • onMouseOver：鼠标经过
  • onMouseOut：鼠标移出
  • onChange：文本内容改变事件
  • onSelect：文本框选中
  • onFocus：光标聚焦
  • onBlur：移开光标

事件绑定方式

JavaScript 常见事件绑定方式有三种：

  1. HTML 属性
  2. DOM 属性
  3. addEventListener 方法

当前课堂代码主要演示的是 HTML 属性绑定方式。

课堂完整示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 事件处理</title>
</head>
<body>
    <button onclick="clickEvent()">这是一个点击事件！</button>
    <input type="text" onfocus="focusEvent()" onblur="blurEvent()" placeholder="这是一个焦点事件！">
    <script>
        // 点击事件
        function clickEvent() {
            alert("你点击了按钮！");
        }
        // 焦点事件
        function focusEvent() {
            console.log("输入框获得焦点了！");
        }
        function blurEvent() {
            console.log("输入框失去焦点了！");
        }
    </script>
</body>
</html>

知识点总结

  • 事件是用户和页面交互的重要入口。
  • 点击、焦点、鼠标、输入变化都是常见事件。
  • 最简单的事件绑定方式是直接写在 HTML 标签属性中。

复习表达

JavaScript 事件是指用户或浏览器在页面中触发的某种行为，比如点击、输入、聚焦等。常见事件有点击事件、鼠标事件和表单焦点事件。事件绑定常见方式包括 HTML 属性、DOM 属性和 addEventListener，其中 addEventListener 在实际开发中更常见、更灵活。