免费的企业网站模板,怎么做网站赚大钱,网站快速刷排名工具,html教程 it教程网以下是一份 DOM 事件 HTML 标签属性速查手册#xff0c;涵盖常用场景和示例#xff0c;助你快速查阅和使用#xff1a;
一、DOM 事件速查表
1. 鼠标事件
事件名触发时机适用元素示例代码click元素被点击任意可见元素button.addEventListener(click, () { ... …以下是一份 DOM 事件 HTML 标签属性速查手册涵盖常用场景和示例助你快速查阅和使用
一、DOM 事件速查表
1. 鼠标事件
事件名触发时机适用元素示例代码click元素被点击任意可见元素button.addEventListener(click, () { ... })dblclick元素被双击任意可见元素div.addEventListener(dblclick, handleDoubleClick)mouseover鼠标移入元素任意可见元素img.onmouseover () { ... }mouseout鼠标移出元素任意可见元素div.addEventListener(mouseout, logExit)mousemove鼠标在元素内移动任意可见元素canvas.onmousemove trackPositioncontextmenu右键点击元素弹出菜单前任意元素document.oncontextmenu blockDefaultMenu
2. 键盘事件
事件名触发时机适用元素示例代码keydown键盘按键按下时可聚焦元素如 inputinput.addEventListener(keydown, (e) { if (e.key Enter) submit() })keyup键盘按键释放时可聚焦元素input.onkeyup validateInputkeypress按键按下并产生字符时已弃用建议用 keydown可聚焦元素-
3. 表单事件
事件名触发时机适用元素示例代码submit表单提交时formform.onsubmit (e) { e.preventDefault(); ... }change表单元素值改变并失焦后input, select, textareaselect.addEventListener(change, updateOptions)input表单元素值实时改变时input, textareainput.oninput debounce(search, 300)focus元素获得焦点时可聚焦元素input.onfocus showTooltipblur元素失去焦点时可聚焦元素input.onblur validateField
4. 窗口/文档事件
事件名触发时机适用元素示例代码load资源如图片、页面加载完成window, img, iframewindow.onload initApp;resize窗口大小改变时windowwindow.addEventListener(resize, handleResize)scroll元素滚动时可滚动元素div.onscroll throttle(checkPosition, 100)
5. 其他事件
事件名触发时机适用元素示例代码DOMContentLoadedHTML 解析完成DOM 树就绪无需等待资源documentdocument.addEventListener(DOMContentLoaded, init)transitionendCSS 过渡动画完成任意元素div.ontransitionend removeElementanimationendCSS 动画完成任意元素box.onanimationend () { ... }
二、HTML 标签属性速查表
1. 全局属性所有标签可用
属性名说明示例id唯一标识元素div idheader/divclass为元素指定 CSS 类名p classtext-red/pstyle行内 CSS 样式div stylecolor: red;/divtitle悬停提示文本a href# title返回顶部↑/adata-*存储自定义数据div data-user-id123/divcontenteditable允许元素内容可编辑div contenteditabletrue/div
2. 表单相关属性
属性名说明适用标签示例type输入类型text, email, password 等inputinput typeemailrequired表单提交前必须填写input, select, textareainput requireddisabled禁用表单元素input, buttonbutton disabled提交/buttonplaceholder输入框提示文本input, textareainput placeholder请输入姓名min/max数值/时间输入的最小/最大值input[typenumber, date]input typenumber min1 max10pattern输入内容的正则表达式验证input[typetext]input pattern\d{3}-\d{4}
3. 链接与媒体属性
属性名说明适用标签示例href链接目标 URLa, linka hrefhttps://example.com链接/atarget打开链接的方式如 _blank 新窗口aa target_blank新窗口打开/asrc资源路径图片、脚本、视频img, script, videoimg srclogo.pngalt图片无法显示时的替代文本imgimg srccat.jpg alt猫咪图片controls显示媒体控件播放/暂停等video, audiovideo controls/videoautoplay媒体加载后自动播放video, audioaudio autoplay/audio
4. 元信息与 SEO 属性
属性名说明适用标签示例charset文档字符编码metameta charsetUTF-8name定义元数据名称如关键词、描述metameta namedescription content页面描述propertyOpen Graph 协议社交媒体优化metameta propertyog:title content标题rel定义链接与文档的关系link, alink relstylesheet hrefstyle.css
三、事件处理技巧
1. 阻止默认行为
element.addEventListener(click, (e) {e.preventDefault(); // 阻止链接跳转/表单提交
});2. 阻止事件冒泡
button.onclick (e) {e.stopPropagation(); // 阻止事件向上传播
};3. 事件委托
document.getElementById(list).addEventListener(click, (e) {if (e.target.tagName LI) { // 只处理 li 元素点击console.log(点击了列表项:, e.target.textContent);}
});四、兼容性与最佳实践
优先使用 addEventListener避免 onclick 等行内事件属性的覆盖问题。移动端适配使用 touchstart、touchend 替代部分鼠标事件。语义化标签优先使用 button 而非 div 模拟按钮提升可访问性。属性验证对用户输入使用 required 和 pattern 进行前端验证。
资源推荐
MDN Web 文档 - HTML 属性JavaScript 事件参考
掌握这些事件和属性你将能更高效地开发交互丰富的 Web 应用 推荐阅读
无限畅用Cursor 编辑器四步轻松搞定历时两周半开发的一款加载live2模型的浏览器插件github优秀开源作品集
