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属性中;

猜你喜欢

转载自blog.csdn.net/firstlt0217/article/details/115793778