JavaScript事件
事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。事件是基于对象存在，事件通常可以修饰多种对象。
1.为对象添加事件的2种方式
①：在HTML元素中添加对象的事件
<head>
<title>事件</title>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<script type="text/javascript">
functionovertest(){
alert("移动到图片上方");
}
</script>
</head>
<body>
<img src="1.jpg" width="200" height="300" onmouseover = "overtest()";/>
</body>
②：在JS代码中为元素添加事件
<head>
<title>事件</title>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<script type="text/javascript">
functionovertest(){
alert("移动到图片上方");
}
window.onload = function(){
document.getElementById("myimg").onmouseover = overtest;
}
</script>
</head>
<body>
<img src="1.jpg" width="200" height="300" id="myimg";/>
</body>
总结：优先使用第二种，将js代码与HTML元素代码分离开，更加方便统一管理维护。
问题：HTML 元素添加事件， 与JS添加事件是否可以完全等价？
在实际开发中，如果传参数，使用HTML元素绑定事件，如果不传参数，使用JS绑定事件。传参数也可以使用与JS绑定事件【使用匿名函数】。示例代码如下：
<head>
<title>HTML事件绑定与JS绑定</title>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<script type="text/javascript">
functionclicktest(o){
alert(o);
}
window.onload = function(){
document.getElementById("mybutton").onclick = function(){
clicktest('次奥');
}
}
</script>
</head>
<body>
<input type="button" id="mybutton" value="点击我！">
<input type="button" value="别碰我！" onclick = "clicktest('次奥')"/>
</body>
2.鼠标移动事件
Mousemove：鼠标移动时触发事件 鼠标跟随效果
Mouseover：鼠标从元素外，移动元素之上，信息提示、字体变色
Mouseout：鼠标从元素上，移出元素范围，和mouseover一起使用
3.鼠标点击事件（左键相关事件）
click 鼠标单击事件
dbclick 鼠标双击事件
mousedown/mouseup 鼠标按下、按键弹起 click = mousedown + mouseup;
oncontextmenu 鼠标右键菜单事件 （不是浏览器兼容事件）
4.聚焦离焦事件
focus 聚焦 页面焦点定位到目标元素
blur 离焦 页面焦点由目标元素移开
Demo:
<script type="text/javascript">
window.onload= function(){
//页面加载后，在输入框加入默认值，并以灰色显示
document.getElementById("username").value= "用户名";
document.getElementById("username").style.color="gray";
//聚焦事件
document.getElementById("username").onfocus= function(){
document.getElementById("username").value="";
document.getElementById("username").style.color="black";
}
//离焦事件
document.getElementById("username").onblur=function(){
varname = document.getElementById("username").value;
if(name==""){
document.getElementById("username").value="张三";
document.getElementById("username").style.color="gray";
}
}
}
</script>
</head>
<body>
请输入用户名：<input type="text" id="username"><br/>
</body>
5.键盘事件
使用场景：没有提交按钮，我们一般采用回车进行提交
Demo:
<script type="text/javascript">
window.onload = function(){
document.getElementById("message").onkeypress = function(e){
// 判断用户 按键是否为 回车键
if(e && e.which){
// 火狐浏览器
if(e.which == 13){
alert("提交")
}
}else{
// IE浏览器
if(window.event.keyCode ==13 ){
alert("提交")
}
}
}
}
</script>
<body>
发送消息 <input type="text" name="message" id="message"/>
</body>
IE 中window对象，提供event属性，所以在IE中可以直接使用 event对象
火狐没有全局event对象，必须在发生事件时，产生一个event对象 ，传递默认方法
6.form的提交、重置事件
submit/reset
onsubmit = "return validateForm" 对表单进行校验
7.改变事件
onchange 制作select联动效果 ---- 省市联动
重点 ： onclick 、onchange 、onblur、 onsubmit
8.默认事件的阻止和传播阻止
使用场景极为常见，超链接用户点击后，取消了不发生跳转。
<script type="text/javascript">
// 阻止默认事件发生
functionconfirmDel(e){
varisConfirm = window.confirm("确认删除吗？");
if(!isConfirm){// 用户选择了取消
// 阻止默认事件
if(e && e.preventDefault){
// 火狐
e.preventDefault();
}else{
// IE
window.event.returnValue = false;
}
}
}
// 阻止事件冒泡
functionaclick(e){
alert("a");
if(e && e.stopPropagation){
// 火狐浏览器
e.stopPropagation();
}else{
// IE 浏览器
window.event.cancelBubble = true;
}
}
functiondivclick(){
alert("div");
}
</script>
<body>
<h1>默认事件</h1>
<!-- 删除时，询问用户是否删除，然后再跳转-->
<a href="del?id=1" onclick="confirmDel(event);">这是一个链接</a>
<h1>事件传播</h1>
<!-- 事件冒泡传播 -->
<div onclick="divclick();"><a href="#" onclick="aclick(event);">这个链接 会触发两个事件执行</a></div>
</body>
HTML DOM Event对象
提供preventDefault()用于阻止默认事件的发生， 该方法IE 不支持 ，在IE中使用 returnValue
提供stopPropagation()用与阻止事件传播，该方法IE不支持，在IE中 cancelBubble
