JavaScript表单事件详解与示例

1 下载量 47 浏览量 更新于2024-08-28 收藏 73KB PDF 举报
"JavaScript表单事件是Web开发中不可或缺的一部分，它们允许开发者对用户的交互行为进行响应和处理。本文详细汇总了23种常见的JavaScript表单事件，涵盖了从页面加载到用户输入、鼠标操作以及表单提交等各个方面的交互。 1. onabort (ns3，ns4，ie4): 当用户中断了正在加载的网页时触发，通常用于清理或处理未完成的操作。 2. onblur (ns3，ns4，ie3，ie4): 当元素失去焦点，比如用户点击了元素外部，可以用来清除或更新与该元素相关的状态。 3. onchange (ns3，ns4，ie3，ie4): 当表单元素的内容发生变化时触发，例如在文本框输入后点击其他地方，常用于验证或更新数据。 4. onclick (ns3，ns4，ie3，ie4): 用户单击元素时触发，可以用于执行与元素相关的功能。 5. ondblclick (ns4，ie4): 用户双击元素时触发，通常用于执行更复杂的操作。 6. onerror (ns3，ns4，ie4): 浏览器加载页面时出现错误，如图片加载失败，可以用来显示错误消息或备用内容。 7. onfinish (ie4): 滚动条滚动完成一个循环时触发，适用于自定义滚动效果。 8. onfocus (ns3，ns4，ie3，ie4): 元素获取焦点时触发，可用于高亮显示或初始化相关功能。 9. onkeydown (ns4，ie4): 用户按下键盘上的任意键时触发，常用于实现键盘快捷键。 10. onkeypress (ns4，ie4): 用户按下并释放键时触发，通常用于捕获特定的字符输入。 11. onkeyup (ns4，ie4): 用户释放键时触发，可用于记录用户输入的键序列。 12. onload (ns3、4，ie3、4): 页面或图像加载完成后触发，常用于初始页面布局或数据填充。 13. onmousedown (ns4，ie4): 鼠标按钮被按下时触发，可以用于开始拖拽操作。 14. onmousemove (ie3、4): 鼠标在页面上移动时触发，可用于实现悬停效果或绘制。 15. onmouseout (ns3、4，ie4): 鼠标离开元素时触发，常用于取消高亮或隐藏提示信息。 16. onmouseover (ns3、4，ie3、4): 鼠标进入元素范围时触发，可以用于显示额外信息或激活交互。 17. onmouseup (ns4，ie4): 鼠标按钮被释放时触发，常与onmousedown一起用于完成点击事件。 18. onreset (ns3、4，ie3、4): 表单重置时触发，可以用来恢复表单的初始状态。 19. onresize (ns4，ie4): 浏览器窗口大小改变时触发，常用于动态调整页面布局。 20. onselect (ns3、4，ie3、4): 用户选取文本框内的文本时触发，可用于复制或处理选中的内容。 21. onstart (ie4): 文本滚动开始时触发，可用于控制滚动动画。 22. onsubmit (ns3、4，ie3、4): 表单提交时触发，通常用于验证数据或发送请求。 23. onunload (ns3、4，ie3、4): 用户离开当前页面时触发，可用于清理资源或发送离站跟踪数据。 这些事件是JavaScript与用户交互的核心，理解和熟练掌握它们对于创建响应式和交互性强的Web应用至关重要。通过正确地绑定和处理这些事件，开发者可以构建出更丰富、更具用户体验的网页应用。"

JSEventForm:JS 中的事件处理和解析表单

2021-07-02 上传
JS事件表单 JS 中的事件处理和解析表单 我创建了这个项目作为我自己的事件处理和表单解析解决方案。 在我的工作中，我不喜欢有很多事件监听器或大型开关盒。 此外，由于我使用了很多表单，因此我想排除一些逻辑，这些逻辑可以为我提供尽可能干净的数据。 详细说明 script.js 在 script js 中，我在 body 上注册了 2 个事件监听器，点击并提交。 我也可以设置其他侦听器，但出于示例目的，我只使用了这两个。 在 html 内部，我使用 data-event 属性来告诉我哪个事件触发哪个元素的哪个函数。 因此，如果我想侦听某个 span 元素上的 click 事件，它将具有属性 data-event="click:someFunction"。 如果我想在我的元素上有多个动作，我会添加它们，用逗号（，）分隔。 在处理程序内部，我检查要触发的操作是否与发生的事件类型相同，以便可以注册多

javascript表单事件汇总

2008-10-22 上传
javascript表单事件汇总,纯文本格式

from flask import Flask, render_template, request import pandas as pd from openpyxl import load_workbook app = Flask(__name__) @app.route('/') def index(): return render_template('index2.html') @app.route('/submit', methods=['POST']) def submit(): # 获取表单数据 line = request.form['line'] date = request.form['date'] model = request.form['model'] lists = request.form['lists'] number = request.form['number'] prod_date = request.form['prod_date'] shift = request.form['shift'] prod_line = request.form['prod_line'] responsible = request.form['responsible'] # 表单验证：检查是否所有表单字段都已填写 if not all([line, date, model, lists, number, prod_date, shift, prod_line, responsible]): return "<script>alert('请填写完整表单信息！');history.back();</script>" else: # 在这里添加提交表单信息的代码 return "<script>alert('提交成功！');window.location.href='/';</script>" # 将数据存储到 Excel 文件中 filepath = 'D:/data.xlsx' wb = load_workbook(file_path) ws = wb.active ws.append([line, date, model, lists, number, prod_date, shift, prod_line, responsible]) wb.save(file_path) return render_template('index2.html') @app.route('/history') def history(): # 从 Excel 文件中读取历史记录 file_path = 'D:/data.xlsx' df = pd.read_excel(file_path,keep_default_na=False) # 获取查询参数 query_date = request.args.get('date') query_line = request.args.get('line') query_model = request.args.get('model') # 进行查询 if query_date: df = df[df['确认日期'] == query_date] if query_line: df = df[df['确认线别'] == query_line] if query_model: df = df[df['异常机种'] == query_model] # 生成汇总图表 chart_data = df.groupby('异常现象').size().reset_index(name='count') chart_labels = chart_data['异常现象'].tolist() chart_values = chart_data['count'].tolist() return render_template('history.html', data=df.to_dict('records'), chart_labels=chart_labels, chart_values=chart_values) @app.route('/chart') def chart(): return render_template('chart.html') if __name__ == '__main__': app.run(debug=True)

2023-06-13 上传
5. 通过 /chart 路由展示一个简单的图表，用于演示如何使用 Chart.js 库生成图表。 在这段代码中使用了 Flask、pandas 和 openpyxl 库。Flask 库用于构建 Web 应用程序，pandas 库用于读写 Excel 文件和进行数据...

帮我写一个能够投票以及在图表中汇总用户投票结果的网页源码

2023-04-01 上传
可以使用JavaScript库（如Chart.js）来创建图表。例如： ``` // 创建图表 var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['...

html5知识点汇总

2023-09-07 上传
5. 表单增强：HTML5改进了表单元素，提供了一些新的输入类型和属性。例如，`<input>`标签的type属性可以使用email、date、number等新类型，而不仅仅是text。 6. Web Workers：HTML5的Web Workers功能允许开发者在...

element ui show summary

2023-05-26 上传
Element UI是一套基于Vue.js 2.0的桌面端组件库，包含了一些常用的UI组件和交互效果，如按钮、表单、表格、弹窗、菜单等等。其中，表格组件提供了“汇总行”（Summary）功能，可以方便地对表格数据进行统计和汇总。...

vue-cli+ts+antd项目汇总

2023-09-07 上传
ts是TypeScript的简称，是一种由微软开发的开源编程语言，它是JavaScript的超集，可以为JavaScript代码添加静态类型检查和封装类、模块等面向对象编程的特性。antd是蚂蚁金服开源的一套基于React封装的UI组件库，...

window.location.href表单传参

2023-08-19 上传
在目标页面中，可以使用JavaScript解析URL中的查询字符串来获取这些参数。一个常见的方法是使用location.search来获取URL中的查询字符串部分，然后使用split和for循环来解析参数值。例如： var url = location....

el-table的合计列getSummaries方法第一次访问没有合计值显示，刷新当前路由就可以

2024-10-27 上传
当你使用 `el-table` 的时候，可能会遇到这样一个情况：首次加载数据时，表单内的“合计”或者汇总列可能不会立即显示出计算后的值，这是因为 `getSummaries` 方法可能在页面初次渲染时还未执行到。 `getSummaries`...

v-model原理 面试题

2023-08-26 上传
1. 在输入表单元素中使用v-model指令时，Vue.js会自动为该元素添加一个事件监听器，以便在用户输入时更新数据模型。 2. 当用户在输入框中输入内容时，v-model会将用户输入的值与Vue实例中的数据进行绑定，以保持...
weixin_38684335
  • 粉丝: 1
  • 资源: 932
上传资源 快速赚钱

最新资源