JavaScript媒体和表单事件
- JavaScript
- 2024-08-23
- 172热度
- 0评论
媒体事件是由音视频DOM对象触发的事件。例如图片加载完成、音视频的播放和结束等事件。
表单用于通过网页收集用户输入的数据，表单由HTML输入框、复选框、单选按钮、提交按钮等元素构成。表单事件包括表单提交、重置、表单元素获取或失去焦点、表单元素内容改变等事件构成。
媒体事件
常用媒体事件如下表所示：
| 事件类型 | 描述 | 备注 |
| onabort | 当音频/视频终止加载时触发该事件 | |
| onplay | 当音频/视频开始播放时触发该事件 | |
| onended | 当音频/视频播放结束时触发该事件 | |
| onerror | 当音频/视频加载过程发生错误时触发该事件 | |
| onpause | 当音频/视频播放暂停时触发该事件 |
媒体事件主要用于音视频的播放控制，支持<audio>和<video>标签。onabort事件是在音频或视频非正常终止加载时触发，并不是在音频和视频数据加载完成后触发。
案例代码：
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload=function (){
var audio = document.getElementById("id_audio");
// 监听onabort事件
audio.addEventListener('abort',function(){
alert("onabort事件被触发");
});
// 监听onplay事件
audio.addEventListener('play',function(){
alert("onplay事件被触发");
});
// 监听onended事件
audio.addEventListener('ended',function(){
alert("onended事件被触发");
});
// 监听onpause事件
audio.addEventListener('pause',function(){
alert("onpause事件被触发");
});
}
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<audio id="id_audio" controls>
<source src="http://www.milihua.com/test.mp3" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
</boyd>
<html>
表单事件
常用表单事件如下表所示：
| 事件类型 | 描述 | 备注 |
| onblur | 当DOM对象失去焦点时触发该事件 | |
| onchange | 当DOM对象内容改变时触发该事件 | |
| onfocus | 当DOM对象获取焦点时触发该事件 | |
| oninput | 当DOM对象获取用于输入时触发该事件 | |
| onselect | 用户选取文本时触发该事件 | |
| onsubmit | 当表单提交时触发该事件 | |
| onreset | 当表单重置时触发该事件 |
onchange事件主要支持<input>, <keygen>, <select>, 和 <textarea>HTML元素。
oninput、onselect事件主要支持<input>、<textarea>HTML元素。
案例代码：
<html>
<head>
<title>信息登记</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload = function() {
// 获取username（input）对象
username = document.getElementById("username");
// 提示用户已获取焦点
username.onfocus = function() {
document.getElementById("text_count").innerText = "获取焦点"
}
// 用户输入时统计字符数
username.oninput = function() {
message = "已输入" + username.value.length + "个字符";
document.getElementById("text_count").innerText = message
}
// 提示用户失去焦点
username.onblur = function() {
document.getElementById("text_count").innerText = "失去焦点"
}
// 获取job_single（select）对象
job_single = document.getElementById("job_single");
// 获取用户选择的职业
job_single.onchange = function() {
// selectedIndex是选择项的索引
var index = job_single.selectedIndex
// 获取选择项的文本
var text = job_single.options[index].value;
document.getElementById("job_text").innerText = text
}
}
// 处理表单提交函数
function processsubmit() {
username = document.getElementById("username");
// 若用户没有输入姓名阻止提交
if( username.value == "请输入您的姓名" )
{
alert("请输入姓名");
return false;
}
return true;
}
</script>
</head>
<body>
<h3>用户信息登记表</h3>
<hr>
<form action="/login.jsp" onsubmit="return processsubmit()">
<p>姓名：<input type="text" id="username" maxlength="20" value="请输入您的姓名"/><span style=" margin-left:30px;" id="text_count"></span></p>
<p> 年龄：<input type="text" name="age" maxlength="20" value="请输入您的年龄"/></p>
<p>性别：<input type="radio" name="sex" value="男" />男<input type="radio" name="sex" value="女" />女</p>
<p>爱好：</p>
<input type="checkbox" name="fav" value="旅游" checked />旅游
<input type="checkbox" name="fav" value="体育" checked />体育
<input type="checkbox" name="fav" value="文学" />文学
<input type="checkbox" name="fav" value="娱乐" />娱乐
<input type="checkbox" name="fav" value="学习" />学习
<input type="checkbox" name="fav" value="军事" />军事
<p>职业：<span style=" margin-left:30px;" id="job_text"></span></p>
<select id="job_single" size="6">
<option value="软硬件开发" selected>信息技术</option>
<option value="互联网运营" >互联网运营</option>
<option value="生产制造" >生产制造</option>
<option value="科学研究" >科学研究</option>
<option value="项目管理" >项目管理</option>
<option value="公务员" >公务员</option>
<option value="医疗" >医疗</option>
</select>
<p>个人简介：</p>
<textarea cols="50" rows="10">请输入个人简介</textarea>
<p><input type="submit" value="提交"/></p>
</form>
</body>
<html>
