JavaScript DOM 事件
DOM 事件就是指 当页面上发生某一件事的时候激发某一个函数 相当监听/触发设备 比如：
- 元素被单击时
onclick - 元素失去焦点时
onblur - 表单被提交时，用
onsubmit
DOM 事件如何声明？
- 直接在元素标签中声明
<input type='button' onclick=""> - 以事件属性附上一个函数变量：例如
inputobj.onclick = 一个函数;
主要的 DOM 事件：（可以归为 3 类）
- 页面上的变化引起的 比如 失去焦点 关闭页面
- 鼠标变化引起的 比如 鼠标单击 鼠标经过
- 键盘事件
其中 onsubmit 比较特殊 ：
在 <form onsubmit='return 函数名'> 这样函数 return false 时 才能阻拦表单的提交行为
鼠标事件：
onclick当单击时onmouseOver当经过时onMouseDown当鼠标按下时onMouserUp当鼠标抬起时onMouseMove当鼠标移动时
键盘事件：
onchange当内容被改变时[重要]onSelect当内容被选中时onkeydown当键盘按下时onkeyup当键盘抬起时onSubmit当表单提交时[重要]onReset当表单重置时
页面事件：
onblur当失去焦点时onfocus当获得焦点时onload当页面加载时onunload当页面关闭时
onblur 失去焦点
<form action="">
<p>Email:<input type="text" name="email" value="" onblur="t1();"></p>
<p>姓名:<input type="text" name="username" onfocus="t2();"></p>
</form>
//失去焦点
function t1(){
var con = document.getElementsByName('email')[0].value;
if(con == ''){
document.getElementsByName('email')[0].value = prompt('请输入邮件地址：');
}
}
//获得焦点
function t2(){
var con = document.getElementsByName('username')[0];
con.style.border = '2px solid red';
}
onload
<body onload="t1();" onunload="t2();"><!-- onload 写在页面的开始位置 -->
</body>
<form action="">
<p>Email:<input type="text" name="email" value="" ></p>
<p>姓名:<input type="text" name="username"></p>
</form>
function t1(){
var con = document.getElementsByName('email')[0].value='请填写您的 email';
}
function t2(){
alert("您真的要关闭吗");
}onmouserover
<a href="#" onmouseover="t3();" onmouseout="t4();">百度</a>
<p id="baidu">
百度详细介绍
<img src="./images/logo.png">
</p>
<p>
<select name="xueli" onchange="t5();">
<option value="">请选择学历</option>
<option value="大学" >大学</option>
<option value="中学">中学</option>
<option value="初中">初中</option>
<option value="小学">小学</option>
</select></p>
<form action="" onsubmit="return t6();"> <!-- onsubmit 和 return false 结合才能阻止提交 地址栏没变化说明阻拦 -->
<p>Email:<input type="text" name="email" value="" ></p>
<p>姓名:<input type="text" name="username"></p>
<p><input type="submit" value="提交 "></p>
</form>
<style type="text/css">
#img{
display: none;
}
</style>
function t1(){
alert('来了');
}
function t2(){
alert('走了');
}
function t3(){
var bd = document.getElementById('baidu');
bd.style.display = 'block';
}
function t4(){
var bd = document.getElementById('baidu');
bd.style.display = 'none';
}
function t5(){
var sel = document.getElementsByTagName('select')[0];
// alert(sel.value);
if(sel.value == ''){
alert('至少选择一个');
}
}
function t6(){
var con = document.getElementsByName('email')[0].value;
if(con == ''){
document.getElementsByName('email')[0].value = prompt('请输入邮件地址：');
return false;//和 67 行结合才能阻拦提交
}
}如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
上一篇： JavaScript 数据类型
下一篇： 彻底找到 Tomcat 启动速度慢的元凶
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论