HTML DOM 事件
事件监听
- 事件监听第一种方法
例如:
var oBtn = document.getElementById('btn');
oBtn.onclick = function () {}
- 事件监听第二种(官方)方法
语法:
element.addEventListener(event, function, useCapture);
注1:
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注2:
addEventListener() 方法允许向同个元素添加多个事件,且不会覆盖已存在的事件。
例如:
var oBtn = document.getElementById('btn');
oBtn.addEventListener('click',fn1);
function fn1() {
alert(123)
}
- removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄。
element.removeEventListener("mousemove", myFunction);
鼠标事件
- click ----------------鼠标单击事件
- dblclick-------------鼠标双击事件
- contextmenu------右键菜单事件
- mouseover--------鼠标悬浮事件
- mouseout----------鼠标移走事件
- mousedown-------鼠标按下事件
- mouseup----------鼠标释放事件
- mousemove-------鼠标移动事件
键盘事件
- keydown------键盘按下事件
- keyup--------键盘松开事件
- keypress-----键盘按下事件
注:keydown与onkeypress区别: keypress把自己定位为高级事件 能够显示特殊的符号
文档事件
- load--------事件直到文档和所有图片加载完毕时才会触发
- unload-------事件在窗口关闭或者document对象将要卸载时触发,发生在window、body、frameset等对象上面。它的触发顺序排在beforeunload、pagehide事件后面。unload事件只在页面没有被浏览器缓存时才会触发,换言之,如果通过按下“前进/后退”导致页面卸载,并不会触发unload事件。
- beforeunload----事件在即将离开当前页面(刷新或关闭)时触发。
表单事件
- submit------表单提交事件
- reset-------表单提交事件
- blur--------表单失去焦点事件
- focus-------表单获得焦点事件
- change------表单改变事件
图片事件
- abort------图片终止加载时触发
- load-------图片加载事件
- error------图片加载失败事件