JavaScript DOM事件级别

DOM事件级别

（1）DOM0级

DOM0级事件具有极好的跨浏览器优势，会以最快的速度绑定。绑定方式有如下两种

• 行内绑定（内联模型）
  将函数名直接作为html标签中属性的属性值。

<button  id="btn" onclick="btnClick()">现在的时间</button>
<script type="text/javascript">
	function btnClick(){
		var btn = document.getElementById("btn");
		btn.innerHTML=Date();
	}
</script>

• 动态绑定（脚本模型）
  通过在JS中选中某个节点，然后给节点添加onclick属性。

<div id="btn">按钮</div>
<script>
	var btn = document.getElementById("btn");
	btn.onclick = function(){
	  btn.innerHTML=Date();
	}
</script>

（2）DOM2级

DOM2级定义了两个事件处理程序。（观察者模式）

• addEventListener() ：添加事件侦听器
• emoveEventListener() ：删除事件侦听器

（3）DOM3级

• 对DOM2增加了内容模型 (DTD 、Schemas) 和文档验证。
• 定义了一些新的事件，比如键盘事件，还可以自定义事件。

自定义事件：自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。

• 要创建的自定义事件可以由createEvent(“CustomEvent”);
• 返回的对象有一个initCustomEvent（）方法接收如下四个参数。

参数类型	作用
type：字符串	触发的事件类型，自定义。例如 “keyDown”，“selectedChange”;
bubble（布尔值）	标示事件是否应该冒泡；
cancelable(布尔值)	标示事件是否可以取消；
detail（对象）	任意值，保存在event对象的detail属性中；