JavaScript DOM事件模型
早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的javascript的实现都不进相同,本节内容介绍javascript的dom事件模型及事件处理程序的分类。
1、dom事件模型。dom事件模型分为两种:事件冒泡和事件捕获。事件冒泡最初是微软提出的dom事件流的模型,顾名思义,就是值浏览器的事件流如同冒泡一样,从最低处到最高处。最低处对应的是dom中最具体的元素,最高处则是最外层元素,最外层元素一般就是document元素。
a、事件冒泡模型:
如下图,当点击最底层的span元素时,在冒泡模型中触发的事件流为:span的click事件触发---->父级元素div的click事件触发---->顶层的document元素的click事件触发。
b、事件捕获模型:
如下图,当点击span元素时,在事件捕获模型中触发的事件流为:最顶层的document的click事件首先被触发---->子容器div(同时也是span的父容器)的click事件被触发
---->最底层的span元素的click事件触发。
可见,事件冒泡和事件捕获的事件触发流程是完全相反的。
2、dom事件处理程序的分类。dom事件处理程序分为三种:html事件处理程序、dom 0级事件处理程序、dom 2级事件处理程序(注意:、没有dom1级事件处理程序)。
a、html事件处理程序:
指的是事件绑定直接写在html上,如:
1 <input type="button' value="button" onclick="alert('button clicked!')" />
这里button的click事件的绑定直接写在html中,这种写法即是html事件处理程序。由于这种写法造成html和javascript的紧耦合,当需要调整javascript事件时,不得不调整html代码(就算不修改javascript函数名,只修改函数的内部实现,仍然不推荐使用这种语法绑定事件,会增加不必要的维护成本)。
b、dom 0级事件处理程序:
指的是通过给javascript对象的事件参数属性赋值的模式,如:
1 <input id="btn" type="button" value="button" /> 2 <script> 3 var btn = document.getelementbyid("btn"); 4 btn.onclick = function(){ 5 alert("button clicked!"); 6 } 7 </script>
这里通过直接给btndom对象的onclick属性赋值的形式来绑定click事件就是dom 0级事件处理程序,赋值可以使用匿名函数的形式,也可以使用具名函数的形式,如下:
1 <input id="btn" type="button" value="button" /> 2 <script> 3 var btn = document.getelementbyid("btn"); 4 btn.onclick clickhandle; 5 function clickhandle(){ 6 alert("something clicked!"); 7 } 8 </script>
如需注销,只需将该属性设置为null即可,如下:
1 <input id="btn" type="button" value="button" /> 2 <script> 3 var btn = document.getelementbyid("btn"); 4 btn.onclick clickhandle; 5 function clickhandle(){ 6 alert("something clicked!"); 7 } 8 btn.onclick = null; 9 </script>
注意:如果绑定使用的是匿名函数的形式,通过给事件属性赋值null仍然可以注销该事件。
c、dom 2级事件处理程序:
指的是使用 addeventlistener("eventname","eventhandle",false),其中eventname表示事件名称、eventhandle表示事件处理函数,false表示是否启用事件捕获模式,默认为false。使用addeventlistener函数来给dom元素绑定事件处理程序,如:
1 <input id="btn" type="button" value="button" /> 2 <script> 3 var btn = document.getelementbyid("btn"); 4 btn.addeventlistener("click",function(){ 5 alert("something clicked!"); 6 },false); 7 </script>
同样,这里既可以使用匿名函数的形式也可以使用具名函数的形式,如:
1 <input id="btn" type="button" value="button" /> 2 <script> 3 var btn = document.getelementbyid("btn"); 4 btn.addeventlistener("click",clickhandle,false); 5 function clickhandle(){ 6 alert("something clicked!"); 7 } 8 </script>
注意:通过addeventlistener绑定的事件只能通过removeeventlistener来注销,不能使用dom 0级中的方式注销事件处理程序,注销事件如下:
1 <input id="btn" type="button" value="button" /> 2 <script> 3 var btn = document.getelementbyid("btn"); 4 btn.addeventlistener("click",clickhandle,false); 5 function clickhandle(){ 6 alert("something clicked!"); 7 } 8 btn.removeeventlistener("click",clickhandle); 9 </script>
如果绑定时使用的是匿名函数,则注销操作比较麻烦,可以通过事件参数的callee属性获取当前正在执行的函数,但必须使用在事件绑定的函数内,如:
1 <script> 2 var dom=document.getelementbyid("content"); 3 var clicknum=0; 4 dom.addeventlistener("click",function(e){ 5 clicknum++; 6 alert('你摸了我'+clicknum+'下了。最多摸2下哦'); 7 if(clicknum>=2){ 8 dom.removeeventlistener(e.type,arguments.callee,false); 9 console.log(this); 10 } 11 }); 12 </script>
d、ie中dom 2级事件处理程序的是通过attachevent来绑定的,语法与addeventlistener完全一致。
e、dom 0级和dom 2级事件处理程序的主要区别:
dom 2级事件处理程序可以给元素的事件绑定多个处理程序,如:
1 <input id="btn" type="button" value="button" /> 2 <script> 3 var btn = document.getelementbyid("btn"); 4 btn.addeventlistener("click",clickhandle1,false); 5 btn.addeventlistener("click",clickhandle2,false); 6 function clickhandle1(){ 7 alert("something clicked!"); 8 } 9 function clickhandle2(){ 10 alert("something clicked again!"); 11 } 12 </script>
此时,点击btn时将会依次触发clickhandle1、clickhandle2,注销事件处理程序也需要针对每个事件处理程序使用removeeventlistener。
dom 0级事件处理程序如果以这种形式绑定事件,则后写的方法会覆盖掉之前的方法,即:
1 <input id="btn" type="button" value="button" /> 2 <script> 3 var btn = document.getelementbyid("btn"); 4 btn.onclick = clickhandle1(); 5 btn.onclick = clickhandle2(); 6 function clickhandle1(){ 7 alert("something clicked!"); 8 } 9 function clickhandle2(){ 10 alert("something clicked again!"); 11 } 12 </script>
这里实际只会绑定clickhandle2方法,clickhandle1被后面的clickhandle2覆盖掉。
开发过程中推荐使用dom 0级事件处理程序或者dom 2级事件处理程序,如果只有一个事件处理程序dom 0级就足够了,当然,如需绑定多个事件处理程序,则需使用dom 2级事件处理程序。
为了屏蔽各浏览器之间的实现差异,推荐使用一些javascript库来辅助完成事件绑定。推荐使用jquery,针对不同的浏览器,可以使用统一的接口来完成这一过程。
上一篇: Python 基于pykafka简单实现KAFKA消费者
下一篇: Python----数据预处理