发布于 2017-04-21 15:06:31 | 14 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


原来是由于IE浏览器以及Firefox对于冒泡型事件的支持层次不同造成的。(如对冒泡事件不是很了解可先查询相关资料)
假设在我们页面有这么一段标签:
 
<body> 
  <div id="testDiv" style="width:200px;height:200px;background:#c0c0c0;"></div> 
</body> 

现在在页面加入这么一段脚本:
 
<script type="text/javascript"> 

window.onload=function(){  //在各个层级的元素上绑定事件 
  window.onclick=func; 
  document.onclick=func; 
  document.getElementById("timeDiv").onclick=func; 
  document.body.onclick=func; 
} 
function func(){  //响应函数,输出响应的元素 
  document.getElementById("timeDiv").innerHTML+=this+"<br>"; 
} 

在firefox以及IE 8下打开页面,在标签testDiv(灰色方块)上单击,结果分别如下截图:

  
firefox下结果

IE 8下结果

可以看到,两者结果并不相同?究竟为什么会这样呢?
原来是由于IE浏览器以及Firefox对于冒泡型事件的支持层次不同造成的。(如对冒泡事件不是很了解可先查询相关资料)
(1)在IE 6以及后续版本,冒泡事件支持的层级达到document对象。
(2)在firefox(准确的说应该是Mozilla1.0以及更高版本),对冒泡事件的支持一直上升到window窗口对象。
于是就造成了上面事件响应结果的不同。

另外,有个有意思的地方不知道你注意到了没有?就是事件目标的响应顺序。(冒泡事件的响应顺序。。。好像有点废话)我们知道,firefox同时支持两种事件模型,也就是:捕获型事件和冒泡型事件。在这里明显事件处理函数作用在了冒泡阶段。也就是说,如果我们采用传统的直接给事件处理函数属性赋值的话,比方说:

 
document.body.onclick=func; 

事件处理函数将被添加到事件的冒泡阶段。

以上就是对于IE、firefox里面冒泡事件响应层级的一点介绍,同时顺带介绍了采用传统事件处理函数直接赋值的默认处理。详细的讲解可参见大牛Nicholas C. Zakas所著的《javascript高级程序设计》。

PS:以上内容仅仅为个人读书笔记,如有错漏,随时欢迎指正。同时希望能有更多的前端爱好者们共同分享你们的心得!



相关阅读 :
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Javascript下IE与Firefox下的差异兼容写法总结
让innerText在firefox火狐和IE浏览器都能用的写法
再谈ie和firefox下的document.all属性
ie与firefox下的event使用说明与详细区别
IE浏览器兼容Firefox的JS脚本的代码
FF IE浏览器修改标签透明度的方法
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Javascript在IE或Firefox下获取鼠标位置的代码
IE和Firefox下javascript的兼容写法小结
IE与Firefox下javascript getyear年份的兼容性写法
IE和Firefox之间在JavaScript语法上的差异
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务