JS中的恶性事件设计方案已不让你困扰

阅读  ·  发布日期 2021-02-19 09:18  ·  admin
抽时间学习培训了下javascript和jquery的恶性事件设计方案,获得颇大,总结此贴,和大伙儿共享。

(1)恶性事件关联的几种方法

javascript给DOM关联恶性事件解决涵数总的来讲有2种方法:在html文本文档中关联、在js编码中关联。下面的方法1、方法2属于在html中关联恶性事件,方法3、方法4属于在js编码中关联恶性事件,在其中方式4是最强烈推荐的做法。
方法1:

HTML的DOM元素适用onclick、onblur等以on开始特性,大家能够立即在这些特性值中撰写javascript编码。当点一下div的情况下,下面的编码会弹出div的ID:

这类做法很明显不太好,由于编码全是放在标识符串里的,不可以文件格式化和排版,当今码许多的情况下很不好看懂。这里有1点值得表明:onclick特性中的this意味着的是当今被点一下的DOM目标,因此大家能够根据this.id获得DOM元素的id特性值。

方法2:

当今码较为多的情况下,大家能够在onclick等特性中特定涵数名。

跟上面的做法相比,这类做法略好1些。值得1提的是:恶性事件解决涵数中的this意味着的是window目标,因此大家在onclick特性值中,根据this将dom目标做为主要参数传送。

这类做法this意味着当今的DOM目标。也有1点:这类做法只能关联1个恶性事件解决涵数,后边的会遮盖前面的。

方法3:IE下应用attachEvent/detachEvent涵数开展恶性事件关联和撤销。

attachEvent/detachEvent适配性不太好,IE6~IE11都适用该涵数,可是FF和Chrome访问器都不适用该方式。并且attachEvent/detachEvent并不是W3C规范的做法,因此不强烈推荐应用。在IE访问器下,attachEvent有下列特性。

a) 恶性事件解决涵数中this意味着的是window目标,并不是dom目标。

尽管应用attachEvent关联了2次,可是涵数a只会启用1次。

b)不一样的涵数目标,能够反复关联,不容易遮盖。

当outestA的click恶性事件产生时,会弹出2个会话框 
 
密名涵数和密名涵数是相互之间不同样的,即便编码彻底1样。因此假如大家想用detachEvent撤销attachEvent关联的恶性事件解决涵数,那末关联恶性事件的情况下不可以应用密名涵数,务必要将恶性事件处事涵数独立写成1个涵数,不然没法撤销。

方法4:应用W3C规范的addEventListener和removeEventListener。

这2个涵数是W3C规范要求的,FF和Chrome访问器都适用,IE6/IE7/IE8都不适用这2个涵数。但是从IE9刚开始就适用了这2个规范的API。

当点一下outestA的情况下,涵数a只会启用1次  
c) 不一样的恶性事件解决涵数能够反复关联,这个特点与attachEvent1致。
(2)恶性事件解决涵数的实行次序

方法1、方法2和方法3都不可以完成恶性事件的反复关联,因此当然也就不存在实行次序的难题。方法4和方法5能够反复关联特点,因此必须掌握下实行次序的难题。假如你写出依靠于实行次序的编码,能够判断你的设计方案存在难题。因此下面的次序难题,仅做为兴趣爱好讨论,沒有甚么具体实际意义。立即上结果:addEventListener和attachEvent主要表现1致,假如给同1个恶性事件关联好几个解决涵数,先关联的先实行。下面的编码我在IE11、FF17和Chrome39都检测过。

当点一下outA的情况下,会先后复印出1、2、3、4。这里非常必须留意:大家给outA关联了好几个onclick恶性事件解决涵数,也是立即点一下outA开启的恶性事件,因此不涉及到恶性事件冒泡和恶性事件捕捉的难题,即addEventListener的第3个主要参数在这类情景下,沒有甚么用途。假如是根据恶性事件冒泡或是恶性事件捕捉开启outA的click恶性事件,那末涵数的实行次序会有转变。

(3) 恶性事件冒泡和恶性事件捕捉

恶性事件冒泡和恶性事件捕捉很好了解,只但是是对同1件事儿的不一样观点,只但是这2种观点都很有道理。
大家了解HTML中的元素是能够嵌套循环的,产生相近于树的层级关联。

假如点一下了最里侧的outC,那末外侧的outB和outC算不算被点一下了呢?很明显算,要不然就沒有必要区别恶性事件冒泡和恶性事件捕捉了,这1点各个访问器厂家也沒有甚么疑义。倘若outA、outB、outC都申请注册了click种类恶性事件解决涵数,当点一下outC的情况下,开启次序是A– B– C,還是C– B– A呢?假如访问器选用的是恶性事件冒泡,那末开启次序是C– B– A,由内而外,像气泡1样,从水底浮向水面;假如选用的是恶性事件捕捉,那末开启次序是A– B– C,从上到下,像石头1样,从水面落入水底。

DOM恶性事件流:将恶性事件分成3个环节:捕捉环节、总体目标环节、冒泡环节。先启用捕捉环节的解决涵数,其次启用总体目标环节的解决涵数,最终启用冒泡环节的解决涵数。这个全过程很相近于Struts2框中的action和Interceptor。当传出1个URL恳求的情况下,先启用外置阻拦器,其次启用action,最终启用后置阻拦器。

实行結果是只复印capture,不容易复印target和bubble。大家点一下了outC,可是却沒有开启outC上的恶性事件解决涵数,而是开启了outA上的恶性事件解决涵数。

本文来源于: 作者:武汉企业网站建设 互联网营销推广方案策划,本文由武汉版权全部,未经准许转载必究。

武汉市武昌区武珞路442号华中国际性城D座2号楼3305

027⑻7317566 400⑻084-027