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------图片加载失败事件
posted @ 2017-07-06 19:24  pallcard  阅读(173)  评论(0编辑  收藏  举报