事件
事件的定义
当对文档中的元素进行操作的时候或者文档的状态发生改变的时候会产生一个事件
事件的三要素
事件源
事件
事件处理程序
准备知识
document.getElementById
document.getElementsByTagName
innerHTML
style
1.只能对行内样式进行操作
2.backgroundColor 有横杠的css样式要使用驼峰命名法
绑定事件
1.在html标签元素中 onclick='函数名()'
2.使用元素对象的方式
事件驱动
鼠标事件
onclick 单击事件
ondblclick 双击事件
onmouseover 鼠标移入
onmouseout 鼠标移出
oncontextmenu 鼠标右击
onmousedown 鼠标按下
onmouseup 鼠标抬起
onmousemove 鼠标移动
scrollTopt 将内容进行纵向移动
scrollLeft 将内容进行横向移动
键盘事件
onkeydown 键盘按下
keyCode 获取键盘按下的ASCII的值（不区分大小写）
ctrlKey 判断键盘ctrl键是否被按下
altKey 判断键盘alt键是否被按下
shiftKey 判断shift是否被按下
onkeypress 按下抬起
获取键盘按下的ASCII值（区分大小写，不识别系统按键）
onkeyup 键盘抬起
表单事件
onfocus 聚焦
onblur 失去焦点
案例 验证用户名
onsubmit 表单提交事件
onchange 当值发生改变的时候
onreset 表单重置
onselect 文本域的内容被选中的时候触发的时候
框架事件
onload 当网页内容加载完成之后
onerror 文档加载失败的时候
onscroll 当网页发生滚动的时候
document.body.scrollTop 获取滚动高度（谷歌）
document.body.scrollLeft 获取滚动宽度(谷歌)
document.documentElement.scrollTop 获取滚动高度IE
兼容
// 兼容火狐谷歌IE
var top = document.body.scrollTop || document.documentElement.scrollTop;
案例：window.onscroll = function(){
// 谷歌获取滚动的距离
// var top = document.body.scrollTop;
// var left = document.body.scrollLeft;
// 火狐IE中获取的滚动距离
// var top = document.documentElement.scrollTop;
// 兼容火狐谷歌IE
var top = document.body.scrollTop || document.documentElement.scrollTop;
alert(top);
}
阻止冒泡
cancelBubble 使用e对象的方式进行阻止
扩展知识
onbeforeunload
当页面要被关闭的时候执行的代码
//这里必须要写成return的形式 不能写alert
禁止a链接跳转的事件绑定
<a href="javascript:;" id='box'>点击我试试</a>
<a href="javascript:void(0)" onclick="demo()">点击我试试</a>
<a href="www.baidud.conm" onclick="return false">点击我试试</a>