第四章 JavaScript事件机制

一 事件机制

1.1 什么是事件

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义

1.2 事件绑定

写在html元素中
<button onclick="code..."></button>

把事件当作元素对象的方法
btnEle.onclick = function(){

}

事件监听
btnEle.addEventListener('click',function(){

},false)    false表示 冒泡阶段触发（默认）

1.3 事件的捕获和冒泡

捕获阶段： 从祖先元素 到 子元素
冒泡阶段： 从子元素  到 祖先元素
事件默认在冒泡阶段触发

1.4 常用事件

鼠标事件
click  单击
dblcick  双击
contextmenu  右击
mouseenter  mouseover  鼠标悬停
mouseleave  mouseout  鼠标离开
mousedown  鼠标按键按下
mouseup  鼠标按键抬起
mousemove  鼠标移动

键盘事件
keydown  键盘按键按下
keyup  键盘按键抬起
keypress  按键按下  只有可输入的按键才能触发

表单事件
blur  失去焦点
focus  获取焦点
submit  提交 绑定给form元素
reset  重置  绑定给form元素
select  输入框内容被选中
change  内容改变切失去焦点  适合select 选项以改，触发
input  输出内容改变  触发

文档事件
load  绑定给bady　绑定给window 绑定给img、link、script、文档加载完成
unload  文档关闭
beforeunload  文档关闭之前

图片事件
load  图片加载完毕
error  图片加载错误
abort  图片加载中断

其他事件
scroll  元素内部的内容滚动  适合于有滚动条的元素
resize  绑定给window, 窗口尺寸发生变化

1.5 Event对象 事件对象

属性
clientX  鼠标的坐标
clientY  鼠标的坐标
keyCode  键盘的按键  ascii码
button  鼠标按键  0 1 2
target  返回元素  具体触发的元素

方法
stopPropagation()  阻止事件冒泡
preventDefault()   阻止元素的默认事件