事件分类
1、页面事件
<script>
document.getElementById('demo').onclick=function (){
console.log('单击');
};
</script>
<div id="demo"></div>
通常页面的加载是按代码的编写顺序，自上而下依次进行的。
所以在页面还未加载完成情况下，就使用JS操作DOM元素，会出现语法错误，如下图所示：
load事件用于body内所有标签都加载完成后才触发，又因其无需考虑页面加载顺序问题，常常在开发具体功能时添加；unload事件用于页面关闭时触发，开发时经常用于清除引用，避免内存泄漏。
window.onload = function() {
//JS代码
};
2、焦点事件
焦点事件多用于表单验证功能，例如文本框获取焦点改变文本框的样式，文本框失去焦点时验证文本框内输入的数据。focus事件事件触发时机：当获得焦点时触发(不会冒泡)；blur事件事件触发时机：当失去焦点时触发(不会冒泡)。
<style>
body{background: #ddd;}
.box{background: #fff;padding: 20px 30px; width: 400px;margin: 0 auto;text-align: center;}
.btn{width: 180px;height:40px ;background:#3388ff ;border:1px solid #fff ;color:#fff ;font-size: 14px;}
.ipt{width: 260px;padding: 4px 2px;}
.tips{width: 44opx;height: 30px;margin: 5px auto;background: #fff;color: red;border: 1px solid #ccc;
display: none;line-height: 30px;padding-left: 20px;font-size: 13px;}
</style>
</head>
<body>
<div id="tips"></div>
<div class="box" id="fox">
<p><label>用户名：<input id="user" class="ipt" type="text"></label></p><br />
<p><label>密 码：<input id="pass" type="password"></label></p><br />
<p><button id="login" class="btn">登录</button></p>
</div>
<script>
window.onload=function() {
addBlur($('user')); //检测id为user的元素失去焦点后,value值是否为空
addBlur($('pass')); //检测id为pass的元素失去焦点后,value值是否为空
};
function $(obj){ //根据id获取指定元素
return document.getElementById(obj);
}
function addBlur(obj){ //为指定元素添加失去焦点事件
obj.onblur=function(){
isEmpty(this);
};
}
function isEmpty(obj){ //检测表单是否为空
if (obj.value==='') {
$('tips').style.display='block';
$('tips').innerHTML='注意输入的内容不能为空';
} else{
$('tips').style.display='none';
}
}
</script>
</body>
3、鼠标事件
【案例】鼠标拖拽特效
原理分析：根据鼠标的移动位置来计算盒子的移动位置。通过css样式为盒子设置定位，否则即使通过JS代码修改盒子位置(left和top值)也无法完成移动。盒子的位置(left和top值)=鼠标的位置(left和top值)-鼠标按下时与盒子之间的距离以及鼠标移动后的位置，可计算出盒子移动后的位置。
1、html代码和css样式
<style>
body{margin:0;}
.box{width: 400px; height: 300px; border: 5px solid gainsboro;box-shadow: 2px 2px 2px 2px #666;position: absolute;top: 30%;left: 30%;}
.hd{width: 100%; height: 25px;background-color: #7c9299;border-bottom: 1px solid #369;line-height: 25px;color: #fff; cursor:move ;}
#box_close{float: right; cursor: pointer;}
</style>
<div id="box" class="box">
<div id="drop" class="hd">注册信息（可以拖拽）
<span id="box_close">【关闭】</span>
</div>
</div>
2、处理鼠标按下事件
<script>
//获取被拖动的盒子和拖动条
var box=document.getElementById('box');
var drop=document.getElementById('drop');
drop.onmousedown=function(event) {
var event=event || window.event;
//获取鼠标按下时的位置
var pageX=event.pageX || event.clientX+document.documentElement.scrollLeft;
var pageY=event.pageY || event.clientY+document.documentElement.scrollTop;
//计算鼠标按下的位置距盒子的位置
var spaceX=pageX-box.offsetLeft;
var spaceY=pageY-box.offsetTop;
};
</script>
3、处理鼠标移动事件
document.onmousemove=function(event){
var event=event || window.event;
//获取移动后鼠标的位置
var pageX=event.pageX || event.clientX+document.documentElement.scrollLeft;
var pageY=event.pageY || event.clientY+document.documentElement.scrollTop;
//计算并设置盒子移动后的位置
box.style.left=pageX-spaceX+'px';
box.style.top=pageY-spaceY+'px';
if (window.getSelection) {
window.getSelection().removeAllRanges();
} else{
document.selection.empty();
}
};
4、处理释放鼠标按键的事件
document.onmouseup = function(){
doucument.onmousemove=null;
};
4、键盘事件
键盘事件是指用户在使用键盘时触发的事件。例如用户按Esc键关闭打开的状态栏，Enter键直接完成光标的上下切换。keypress事件保存的按键值是ASCII码。
<p>用户姓名：<input type="text"></p>
<p>电子邮箱：<input type="text"></p>
<p>手机号码：<input type="text"></p>
<p>个人描述：<input type="text"></p>
<script>
var inputs=document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++){
inputs[i].onkeydown=function(e) {
//获取事件对象的兼容处理
var e=event || window.event;
//判断按下的是不是Enter键,如果是,让下一个input获得焦点
if(e.keyCode===13){
//遍历所有input框,找到当前input的下标
for (var i=0;i<inputs.length;i++) {
if(inputs[i]===this){
//计算下一个input元素的下标
var index=i+1>=inputs.length?0:i+1;
break;
}
}
//如果下一个input还是文本框,则获取键盘焦点
if(inputs[index].type==='text'){
inputs[index].focus();//触发focus事件
}
}
};
}
</script>
5、表单事件
表单事件指的是对web表单操作时发生的事件。如表单提交前对表单的验证，表单重置时的确认操作。
submit事件的实现通常要绑定在<form>标签上，在用户单击submit按钮提交表单时触发。reset事件用于单击表单重置按钮时触发，这两个事件的返回值若是false则会取消默认操作，否则将执行默认操作。
<form id="register" action="index.php" method="post">
<label>用户名：<input id="user" type="text"></label>
<input type="submit" value="提交" >
<input type="reset" value="重置">
</form>
<script>
//获取表单和需要验证的元素对象
var register=document.getElementById('register');
var user=document.getElementById('user');
register.onsubmit=function(event){//为表单添加submit事件
//获取事件对象,输出当前事件类型
var event=event || window.event;
console.log(event.type);
//判断表单元素是否为空,若为空,则返回false,否则返回true
return user.value?true:false;
};
register.onreset=function(event) {//为表单添加reset事件
//获取事件对象,输出当前事件类型
var event=event || window.event;
cosole.log(event.type);
//判断是否确认重置,按'确定'则返回'true',按取消则返回false
return confirm('请确认是否要重置信息，重置后表单填写的内容将全部清空');
};
</script>
505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
