DOM 常见事件

1.      什么是事件：所谓事件就是指用户或浏览器所执行的某些操作，如点击鼠标，敲击键盘，刷新页面

2.      什么是事件处理程序：所谓事件处理程序就是当时间被触发时所有要执行的函数，事件处理程序的名称有on+事件名构成，如onclick，需要注意所有的事件处理程序的名称都是小写的

3.      事件处理程序的指定形式

a)        HTML事件处理程序：将事件处理程序的指定工作放在HTML标签的开始标签中，如<button   onclick=”函数名()”></button>

l  不足：HTML和JS代码没有实现分离，不利于维护

b)        DOM0级事件处理程序：

l  格式1：节点.事件处理程序=function(){}

l  格式2：节点.事件处理程序= 函数名;

l  注意：

1.        一个节点添加了同种事件处理程序，那么后设置的会将前面设置的覆盖掉

2.        如果要删除事件可以使用如下形式节点.事件处理程序=null

c)        DOM2级事件处理程序

4.      常见事件：UI事件、鼠标事件、键盘事件….

a)        onload事件：

l  作用：页面加载完成后触发事件

l  注意：

1.        如果要使用HTML事件处理程序的添加方式，可以将onload放到body中

2.        如果要同时执行多个方法，那么可以用逗号将方法分隔开（HTML事件处理程序）

l  格式：window.onload

b)        onunload事件

l  作用：在页面卸载或跳转时执行

l  注意：只有IE浏览器支持

l  格式：window.onunload

c)        onresize事件

l  作用：更改对象尺寸时触发

l  格式：window.onresize

d)        onscroll事件

l  作用：在拉动滚动条时触发，该事件必须有滚动条

l  格式：对象.onscroll

e)        onselect事件

l  作用：选择文本框等元素中文本时触发

l  格式：对象.onselect

f)         onchange事件

l  作用：当域中内容被改变时触发

l  格式：对象.onchange

g)        onfocus事件

l  作用：表单元素获得节点是触发

l  格式：对象.onfocus

h)        onblur事件

l  作用：表单元素失去焦点时触发

l  格式：对象.onblur

i)          onsubmit事件

l  作用：在点击提交按钮时触发

l  <form  onsubmit=”函数名（）”></form>

j)          onreset事件

l  作用：在点击重置按钮时触发

l  注意：onsubmit和onreset都是加在form标签上

k)        onclick事件

l  作用：单击鼠标左键时触发

l)          ondblclick事件

l  作用：双击鼠标时触发

m)      onmousedown事件

l  作用：当鼠标被按压下去的时候触发

n)        onmouseup事件

l  作用：当鼠标被松开时触发

o)        onmouseover事件

l  作用：鼠标移入某对象时触发

p)        onmouseout事件

l  作用：鼠标移出某对象时触发

q)        onmousemove事件

l  作用：鼠标在某对象上移动时触发

r)         onkeydown事件

l  作用：键盘按键被按下去时触发

s)        onkeyup事件

l  作用：键盘按键被松开时触发

t)         onkeypress事件

l  作用键盘按键被按下去时触发，适用于键盘上的字符按键

5.      keyCode：键盘按键的编码，适用方式

a)        对象.onkeydown = function(e){e.keyCode}

6.      判断是否是Ctrl键、alt键、shift键

a)        可以使用keyCode值表示

b)        可以用altKey、shiftKey、ctrlKey代表

c)        如果要判断是否将Ctrl键、alt键、shift键同时按下去：格式e.ctrlKey&&e.altKey&&e.shiftKey