[前端开发] 常见的 HTML CSS JavaScript 事件

常见的 HTML CSS JavaScript 事件


事件

在 Web 开发中,事件是用户与网页交互的重要方式之一。通过事件,用户可以与页面元素进行交互,触发相应的功能或效果。本文将介绍常见的 HTML、CSS、JavaScript 事件,以及事件对象和事件代理的概念。

HTML 事件

鼠标事件

鼠标事件是用户通过鼠标与页面元素交互时触发的事件。常见的鼠标事件包括:

  • click: 单击鼠标时触发。
  • dblclick: 在同一元素双击鼠标时触发。
  • mousedown: 按下鼠标键时触发。
  • mouseup: 释放按下的鼠标键时触发。
  • mousemove: 当鼠标在节点内部移动时触发,持续移动时会连续触发。
  • mouseenter: 鼠标进入一个节点时触发,进入子节点不会触发。
  • mouseleave: 鼠标离开一个节点时触发,离开父节点不会触发。
  • mouseover: 鼠标进入一个节点时触发,进入子节点会再次触发。
  • mouseout: 鼠标离开一个节点时触发,离开父节点也会触发。
  • wheel: 滚动鼠标时触发。

键盘事件

键盘事件是用户通过键盘与页面元素交互时触发的事件。常见的键盘事件包括:

  • keydown: 按下键盘时触发。
  • keypress: 按下有值的键触发(数字、字母等)。
  • keyup: 松开键盘时触发。

表单事件

表单事件是用户在表单元素中输入时触发的事件。常见的表单事件包括:

  • input: 当表单元素的值发生改变时触发。
  • select: 当在输入框中选中文本时触发。
  • change: 当表单元素的值发生改变时触发,但与 input 不同的是不会连续触发,而是在全部修改完后触发。
  • reset: 当表单重置时触发,即所有表单成员变回默认值。
  • submit: 当表单数据向服务器提交时触发。

JavaScript 事件对象

事件发生后,会产生一个事件对象作为参数传给监听函数。事件对象常见的属性包括:

  • Event.target: 返回事件当前所在的节点。
  • Event.type: 返回一个字符串,表示事件的类型。
  • Event.preventDefault(): 取消浏览器对当前事件的默认行为。
  • Event.stopPropagation(): 阻止事件在 DOM 中继续传播。

事件代理(事件委托)

事件代理是一种将事件处理程序添加到一个父元素上,以处理其子元素的事件的技术。通过事件代理,可以实现更高效的事件管理,减少事件处理程序的数量。常用于列表或表格等动态内容的处理。

html 复制代码
<ul id="list">
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
</ul>

<script>
    var list = document.getElementById("list");
    list.addEventListener("click", function(e) {
        if (e.target.tagName === "LI") {
            console.log("点击了 li 标签");
            console.log(e.target.innerHTML);
        }
    });
</script>

通过事件代理,我们可以在父元素上监听子元素的事件,从而简化代码并提高性能。

在 Web 开发中,事件是实现交互的关键,理解事件相关知识将有助于更好地处理用户与网页之间的交互行为。

相关推荐
中微子2 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上102417 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y33 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁40 分钟前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry40 分钟前
Fetch 笔记
前端·javascript
拾光拾趣录41 分钟前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟42 分钟前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构
vvilkim1 小时前
Nuxt.js 全面测试指南:从单元测试到E2E测试
开发语言·javascript·ecmascript