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';
}
