最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级_javascript技巧

来源:动视网 责编:小采 时间:2020-11-27 20:55:18
文档

关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级_javascript技巧

关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级_javascript技巧:假设在我们页面有这么一段标签: 代码如下: 现在在页面加入这么一段脚本: 代码如下: window.onload=function(){ //在各个层级的元素上绑定事件 window.onclick=func; document.onclick=func; document.getEle
推荐度:
导读关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级_javascript技巧:假设在我们页面有这么一段标签: 代码如下: 现在在页面加入这么一段脚本: 代码如下: window.onload=function(){ //在各个层级的元素上绑定事件 window.onclick=func; document.onclick=func; document.getEle


假设在我们页面有这么一段标签:
代码如下:

  


现在在页面加入这么一段脚本:
代码如下:
输出响应的元素
  document.getElementById("timeDiv").innerHTML+=this+"
";
}

在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下的javascript冒泡事件的响应层级_javascript技巧

关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级_javascript技巧:假设在我们页面有这么一段标签: 代码如下: 现在在页面加入这么一段脚本: 代码如下: window.onload=function(){ //在各个层级的元素上绑定事件 window.onclick=func; document.onclick=func; document.getEle
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top