事件驱动模型
- 事件驱动要素
1.事件源
触发事件的元素
2.事件
3.事件处理函数(事件句柄或事件监听器)
- 事件分类
1.鼠标事件
onclick 鼠标单击
ondbclick 鼠标双击
onmousedown 按下鼠标
onmouseup 抬起鼠标按键
onmousever 鼠标移上去的时候
onmouseout 鼠标移开
2.键盘事件
onkeyup 键盘松开时
onkeydown 键盘按下
onkeypress 按下并放开任何字母数字键时发生
onkeyup 是在用户放开任何先前按下的键盘键时发生。
onkeydown 是在用户按下任何键盘键
3.表单事件
onsubmit 提交
onblur 失去焦点
onfoucs 获得焦点
onchage 事件在内容改变时触发
input必须是失去焦点才会检测到内容发生改变。而change事件通常是用于下拉菜单select标签。
4.页面事件
onload 文档载入完成
onunioad 文档载入时被撤销
onbeforeunioad 文档载入前被撤销
- 事件绑定
1、脚本绑定
2、标签里绑定
3、监听方式
在IE下:
添加: element.attachEvent(event,function)
绑定多个函数时,先执行后绑定的
删除: element.detachEvent(event,function)
非IE下:
添加: element.addEventListener(event,function,useCapture)
删除: element.removeEventListener(event,function,useCapture)
- 事件对象
1、事件源对象
当事件发生时,只能在事件函数内部访问的对象
2.event对象获取
element.onclick = function(e){
var ev = e || window.event;
}
3.event对象属性
a、鼠标事件
clientX / clientY 相对于浏览器的坐标
screenX / screenY 相对于屏幕的坐标
offsetX / offsetY 相对于事件源本身的坐标(火狐浏览器:layerX / layerY)
b.键盘事件
event.kyCode 获取键盘码
altKey、ctrlKey、shiftKey(布尔类型,返回true/false,判断alt、ctrl、shift这三个键是否被按下)
event.type 检测事件类型
- 事件驱动要素
1.事件源
触发事件的元素
2.事件
3.事件处理函数(事件句柄或事件监听器)
- 事件分类
1.鼠标事件
onclick 鼠标单击
ondbclick 鼠标双击
onmousedown 按下鼠标
onmouseup 抬起鼠标按键
onmousever 鼠标移上去的时候
onmouseout 鼠标移开
2.键盘事件
onkeyup 键盘松开时
onkeydown 键盘按下
onkeypress 按下并放开任何字母数字键时发生
onkeyup 是在用户放开任何先前按下的键盘键时发生。
onkeydown 是在用户按下任何键盘键
3.表单事件
onsubmit 提交
onblur 失去焦点
onfoucs 获得焦点
onchage 事件在内容改变时触发
input必须是失去焦点才会检测到内容发生改变。而change事件通常是用于下拉菜单select标签。
4.页面事件
onload 文档载入完成
onunioad 文档载入时被撤销
onbeforeunioad 文档载入前被撤销
- 事件绑定
1、脚本绑定
2、标签里绑定
3、监听方式
在IE下:
添加: element.attachEvent(event,function)
绑定多个函数时,先执行后绑定的
删除: element.detachEvent(event,function)
非IE下:
添加: element.addEventListener(event,function,useCapture)
删除: element.removeEventListener(event,function,useCapture)
- 事件对象
1、事件源对象
当事件发生时,只能在事件函数内部访问的对象
2.event对象获取
element.onclick = function(e){
var ev = e || window.event;
}
3.event对象属性
a、鼠标事件
clientX / clientY 相对于浏览器的坐标
screenX / screenY 相对于屏幕的坐标
offsetX / offsetY 相对于事件源本身的坐标(火狐浏览器:layerX / layerY)
b.键盘事件
event.kyCode 获取键盘码
altKey、ctrlKey、shiftKey(布尔类型,返回true/false,判断alt、ctrl、shift这三个键是否被按下)
event.type 检测事件类型