事件源

事件被触发的对象,谁被触发。
“按钮”

事件类型

如何触发某件事件
“鼠标点击、鼠标经过、键盘按下……”

事件处理程序

通过一个函数赋值的方式完成

示例:点击一个按钮,弹出对话框

<button id="btn">唐伯虎</button>
<script>var btn = document.getElementById('btn');//获取事件源btn.onclick = function () {//事件类型:点击。事件处理程序:弹出对话框alert('点秋香');}
</script>

常见的鼠标事件

鼠标事件 触发条件
onclick 鼠标点击左键触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发
contextmenu 禁止鼠标右键菜单
selectstart 禁止鼠标选中

鼠标事件对象见《 DOM之事件操作》

常见的键盘事件

键盘事件 触发条件
onkeyup 某个键盘按键被松开时触发,不区分大小写
onkeydown 某个键盘按键被按下时触发,不区分大小写
onkeypress 某个键盘按键被按下时触发,但是不识别功能键,比如ctrl和shift箭头等,区分大小写

执行时先执行keydown,然后是keypress,最后是keyup

//1、keyup 按键弹起的时候触发
document.addEventListener('keyup', function () {alert('我弹起了');
})
//2、keydown 按键按下时触发
document.addEventListener('keydown', function () {alert('我按下了');
})
//3、keypress 按键按下时触发
document.addEventListener('keyupress', function () {alert('我按下了press');
})

键盘事件对象

keyCode属性,返回该键的ASCII值

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注