加入收藏 | 设为首页 | 会员中心 | 我要投稿 湖南网 (https://www.hunanwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 创业 > 正文

JavaScript Event进修第五章:高级变乱注册模子

发布时间:2018-08-25 21:25:49 所属栏目:创业 来源:站长网
导读:在这一章我会讲授两种高级时刻注册模子:W3C和微软的。由于这两个要领都不能跨赏识器,以是在此刻看来他们的行使场所并不多。 W3C和微软都出力于成长本身的变乱注册模子来代替Netscape的传统模子。固然对付微软的模子我不是很伤风,可是w3c的照旧不错的,除
在这一章我会讲授两种高级时刻注册模子:W3C和微软的。由于这两个要领都不能跨赏识器,以是在此刻看来他们的行使场所并不多。

W3C和微软都出力于成长本身的变乱注册模子来代替Netscape的传统模子。固然对付微软的模子我不是很伤风,可是w3c的照旧不错的,除了这个鼠标定位 的题目。不外此刻只有小部门赏识器支持。

W3C
W3C的DOM层面变乱类型留意到了传统模式的题目。他对付你想在一个元素上绑定多个变乱提供了一个很好的办理步伐。

W3C变乱注册模子的要害就是addEventListener()。你给他三个参数:变乱范例,要执行的函数和一个布尔值(true可能false)我一会再表明。把我们熟知的doSomething()函数注册到一个元素的onclick变乱上,你可以这样做:

element.addEventListener('click',doSomething,false)

这种模子的魅力在于我们可以想加几多监听就可以加几多。假如用我们之前的传统模式内里的例子,我们就可以写成这样:

element.addEventListener('click',startDragDrop,false)

2 element.addEventListener('click',spyOnUser,false)

当用户点击元素的时辰两个变乱处理赏罚措施城市执行。必要留意的是W3C尺度不能确定哪个变乱先执行。以是你也不能以为startDragDrop()就在spyOnUser()之前执行。

移除变乱处理赏罚措施也长短常的简朴,用removeEventListener()就行了。以是:

element.removeEventListener('click',spyOnUser,false)

就会移除第二个变乱处理赏罚措施可是第一个不会产生变革。很是大度的措施,完全办理了传统模式下的题目。

匿名函数
在W3C模式下你依然可以行使匿名函数:

element.addEventListener('click',function () {

2 this.style.backgroundColor = '#cc0000'

3 },false)

true可能false
true可能false是addEventListener的最后一个参数,意思是你想让你的函数在捕捉阶段照旧冒泡阶段执行。假如你不确定,那就行使false(冒泡阶段)。

this
在JavaScript里this要害字凡是指函数的全部者。假如this指向变乱产生的HTML元素,那么统统都是那么的柔美,你可以很简朴的做许多工作。

不幸的是,固然this很是的强盛,可是假如你不是明晰的知道他怎么运作的话行使起来照旧较量难的。关于这个我在另一个处全部具体的接头。

在w3c模子下他的运作和在传统模式下是一样的:他暗示此刻正在处理赏罚变乱的HTML元素。

element.addEventListener('click',doSomething,false);

 another_element.addEventListener('click',doSomething,false);  

 function doSomething() {

 this.style.backgroundColor = '#cc0000';

 }

假如你把doSomething()注册在恣意一个HTML元素的click实践上,那么当用户点击的时辰这个元素的配景就会酿成赤色。

哪个变乱处理赏罚措施被注册了呢?
此刻这个W3C变乱注册模式有一个题目就是你不知道一个元素都有哪些变乱处理赏罚措施被注册了。在传统模式下面你可以:
alert(element.onclick)
你就可以看到哪些函数注册了,undefined就是没有函数注册在这个变乱上。只是在最近的DOM Level 3变乱中W3C才添加了一个eventListenerList来存储已经注册了的变乱处理赏罚措施。由于太新了,鲜有赏识器支持。然而,题目已包办理了。

还好的是removeEventListener()不会由于你没有注册元素的某个变乱而返回错误,以是你可以不消担忧的行使removeEventLister()。

微软
微软也有一个变乱注册模子。跟W3C的很像,可是有一个严峻的缺陷。

注册一个变乱处理赏罚措施,attach到一个元素:

element.attachEvent('onclick',doSomething)

可能,你必要两个变乱处理赏罚措施:

element.attachEvent('onclick',startDragDrop)

element.attachEvent('onclick',spyOnUser)

移除一个也很是简朴:

element.detachEvent('onclick',spyOnUser)

缺陷
跟W3C的对较量,微软有两个严峻的题目:
1、变乱老是冒泡,没有被捕获的也许。
2、变乱处理赏罚措施是被引用的,而不是拷贝的,以是this要害字老是指向window然后就一点用都没有。
这两个题目的功效就是假如一个变乱冒泡了那么你是没有也许知道哪个元素在处理赏罚变乱。在后头的变乱次序一章我会具体的表明。

并且微软的尺度只被IE支持,也不能用来跨赏识器。就算你只是给windows赏识器写剧本也最好别用,由于冒泡题目会让工作变得不行摒挡。

假如你想继承进修,请看下一章。

原文地点:http://www.quirksmode.org/js/events_advanced.html 
作者:北玉(tw:@rehawk)
文章出处:http://beiyu.cnblogs.com

(编辑:湖南网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读