HTML DOM 事件

事件Events 是特定的行为,既可以靠终端用户,也可以靠浏览器来完成。能够被文档的任何一部分触发,决定于客户交互或浏览器。Events 通常和函数联合使用,事件不发生,函数就不执行。目的是增加网页的交互性,脚本需要访问页面的内容,并且需要知道用户的交互行为。

Dom 事件句柄Event Handlers

文档对象模型 的事件,是为了掌握事件,并提供事件信息给脚本的方法。它提供了一套指令,可以规范的去确定什么事件发生了,事件的类型,在什么时候,在哪里发生了。两个公用的样式是:一般化的addEventListener()方法,以及专门的on-event句柄集合。on-event 句柄是一组有DOM元素提供的属性,更好的使得元素和事件进行交互。这些事件句柄名称以"on"开头,例如单击事件的句柄是"onclick" ,获得焦点事件的句柄是"onfocus"。

需要注意的重要事项:每个对象的给定事件只能有一个事件句柄。这也是为什么要用 addEventListener() 监听获得事件的通知,特别的,当希望应用多个互相独立的事件句柄,即使对于同样的事件或者同样的元素。

内置HTML 属性

有若干的方法,用以连接事件句柄。较简单的方法是添加特殊属性到标签。内置事件依靠它们的属性名称绑定到一个元素,名称以"on"开头。不是所有事件可以绑定到全部的元素。下面是一般的HTML事件列表:

  • onchange: 一个HTML元素被改变。
  • onclick: 用户点击了一个HTML元素
  • onmouseover: 用户移动鼠标过一个HTML元素
  • onmouseout: 用户移动鼠标离开一个HTML元素
  • onkeydown: 用户按下一个键
  • onload: 浏览器完成页面的加载

例如,当heading(h1) 被单击的时候,为了执行某些JavaScript,使用下面的代码:

<html>
<body>
<h1 id="Heading" onclick="alert('You Clicked...!!')">Click Here</h1>
</body>
</html>

当用户点击"Heading"文本时,可以看到点击事件被发动,并且在单击属性里面的JavaScript代码被执行。

函数调用

当事件发生时,如果想执行一段代码,可以将全部代码放在一个函数里面,一切调用执行。

<html>
<body>
<script type="text/javascript">
function findSquare(i) {
alert("给定数的平方是: " + (i*i));
}
</script>
<input type="button" value="Click Me" onclick="findSquare (5)" />
</body>
</html>

事件监听Event Listener

对应于一个事件被调用的函数称为事件句柄event handler 。可以讲一个特定事件的事件句柄连接到一个元素。当用户和一个元素交互时,浏览器会确定是否为这个元素的这个事件类型注册了事件句柄。鼠标事件,如单击和移动可以在多数浏览器和设备上被触发。但是在大部分的移动智能电话上 ,鼠标移动事件不能被触发,因为不能确定手指是否移动过手机。一些智能手机添加了感应器,所以在未来大部分智能手机将能够确定鼠标移动。下面的程序解释了在JavaScript里面如何捕获不同的事件类型。

<html>
<body>
<h1 id="h4" onmouseover="handle(event)">鼠标移过这里 !!</h1>
<h1 id="h2" onclick="handle(event)">单击了这里 !!</h1>
<h1 id="h3" ondblclick="handle(event)">双击了这里 !!</h1>
<script type="text/javascript">
function handle(e) {
alert(e.type);
}
</script>
</body>
</html>

增加addEventListener 方法

也可以用addEventListener方法添加监听器。EventTarget.addEventListener() 方法添加指定的事件监听器到目标事件监听列表。

document.addEventListener('click', myfunction, false);

例子

<html>
<body>
<button id="eventBtn">Try it</button>
<p id="display"></p>
<script>
document.getElementById("eventBtn").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("display").innerHTML = "Its Worked !!";
}
</script>
</body>
</html>

更多的事件模型

文档对象模型标准提供了大量的事件,并且可以分成六大类:

  • 鼠标事件MouseEvents : 单击click, 鼠标按下mousedown, 鼠标抬起mouseup, 鼠标移动mousemove,等等。
  • 键盘事件KeyboardEvents : 键盘按下抬起keypress, 键盘按下keydown, 键盘抬起keyup.
  • HTML事件HTMLEvents : 装载load, 错误error, 尺寸变化resize, 滚动scroll, 等等。
  • 窗体事件Form events : 选择select, 改变change, 提交submit, 重置reset, 获得焦点focus,等等
  • UI事件UIEvents : 获得焦点focusin ,失去焦点focusout.
  • 转变事件MutationEvents : DOM节点插入DOMNodeInserted, DOM属性改变DOMAttrModified,等等。

原文链接