初期因为电脑浏览器生产商对电脑浏览器销售市场的市场竞争,不一样的电脑浏览器生产商对同样作用的JavaScript有不一样的完成。这节讲述了JavaScript的DOM事情实体模型和事件程序处理的归类。

1.DOM事情实体模型。DOM事情实体模型有二种:事件冒泡和事件捕捉。事件冒泡最开始是谷歌明确提出的DOM事情流实体模型。说白了,使用价值电脑浏览器的故事流如同气泡一样,从较低到最大。最少的一些相匹配DOM中最实际的原素,最大的一部分是最外边的原素,一般是文本文档原素。

一,事件冒泡实体模型:

如下图,点一下底端span元素时,气泡实体模型中获取的事情流为:span的点击事件触发器原理->父原素div的点击事件触发器原理->顶端文本文档原素的点击事件触发器原理。

js给input赋值和取值-jquery实现ajax请求-第1张图片B.事情捕捉实体模型:

如下图,当点一下span元素时,事情捕捉实体模型中获取的故事流如下所示:最先开启最高层文本文档的click事情->开启子器皿div(也是span的父器皿)的click事情。

->底端跨距原素由click事情开启。

js给input赋值和取值-jquery实现ajax请求-第2张图片能够看得出,事件冒泡和事件捕获的事情开启全过程是彻底反过来的。

2.DOM事情程序处理的归类。DOM事情程序处理有三种种类:HTML事情程序处理,DOM 0级事情程序处理和DOM 2级事情程序处理(留意:,沒有DOM1级事情程序处理)。

A.HTML事情程序处理:

指立即写在HTML上的事情关联,如:

1

这儿按键点击事件的关联是立即用HTML撰写的,称之为HTML事情程序处理。因为HTML和JavaScript中间的密切藕合,当必须对JavaScript事情来调节时,务必对HTML源代码开展调节(即便不改动JavaScript涵数名,只改动涵数的內部完成,依然不建议应用这类英语的语法关联事情,会提升多余的维护保养成本费)。

B.DOM 0级事情程序处理:

指的是给JavaScript目标的事情主要参数特性取值的方式,比如:

1 2 3 var btn = document.getElementById("btn");4 btn.onclick = function(){5 alert("button clicked!");6 }7

这儿,click事情是根据立即给btnDOM对象的onclick特性取值来关联的,它是一个DOM 0级事情程序处理。取值能够选用匿名函数或取名涵数的方式,如下所示所显示:

1 2 3 var btn = document.getElementById("btn");4 btn.onclick clickHandle;5 function clickHandle(){6 alert("something clicked!");7 }8

要销户,只需将该特性设定为null,如下所示所显示:

1 2 3 var btn = document.getElementById("btn");4 btn.onclick clickHandle;5 function clickHandle(){6 alert("something clicked!");7 }8 btn.onclick = null;9

留意:假如关联是匿名函数的方式,您依然能够根据为事情特性分派null来销户事情。

c,DOM 2级事情程序处理:

表明应用add event listener(“eventName”,“eventHandle”,false),在其中event name表明事情名字,eventhandle表明事情程序处理,false表明是不是开启事情捕捉方式,初始值为false。应用addEventListener涵数将事情程序处理关联到DOM原素,比如:

1 2 3 var btn = document.getElementById("btn");4 btn.addEventListener("click",function(){5 alert("something clicked!");6 },false);7

一样,这儿能够应用匿名函数或取名涵数的方式,比如:

1 2 3 var btn = document.getElementById("btn");4 btn.addEventListener("click",clickHandle,false);5 function clickHandle(){6 alert("something clicked!");7 }8

留意:由addEventListener关联的事情只有由removeEventListener销户,事情程序处理不可以根据DOM 0级销户。销户事情如下所示:

1 2 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

假如在关联全过程中应用匿名函数,销户实际操作会很不便。当今将要实行的涵数能够根据事情主要参数的被启用方特性得到,但务必在由事情关联的变量中应用,比如:

1 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

d,IE中的DOM 2事情程序处理由attachevent关联,英语的语法与addEventListener完全一致。

e,DOM 0和DOM 2事情程序处理中间的关键差别:

DOM 2级事情程序处理能够将好几个程序处理关联到一个原素的事情,比如:

1 2 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

这时,点击btn将先后开启clickHandle1和clickHandle2,销户事情程序处理还必须对一个事情程序处理应用removeEventListener。

假如DOM等级0事情程序处理以这类方式关联事情,后写方式将遮盖以前的方式,即:

1 2 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

实际上这儿只关联了clickHandle2方式,clickHandle1被clickHandle2遮盖。

提议在研发流程中应用DOM 0级事情程序处理或DOM 2级事情程序处理。假如只有一个事情程序处理是DOM 0级,自然假如必须关联好几个事情程序处理,就必须应用DOM 2级事情程序处理。

为了更好地屏蔽掉电脑浏览器中的完成差别,提议应用一些JavaScript库来輔助事情关联。提议应用JQuery。针对不一样的电脑浏览器,能够应用统一的页面来结束这一全过程。

评论(0条)

刀客源码 游客评论