22五

image lazy load 技术的应用

分类： javascript 暂无评论

淘宝前端的童鞋告诉我，他们首页用了新效果，由于淘宝首页大多以图片为主，并且页面也比较长，所以这个技术在淘宝首页的作用那是相当的大。

展示在用户面前的效果就是，首页打开速度快了很多，拉动滚动条，细心的就会发现，当前屏的图片才开始加载，再继续下拉 ，效果一样。我想你已经明白了，在你打开淘宝首页的时候它只加载了你的可视区域的图片，都知道加载图片很占流量的，一个网页图片一多不想速度变慢就必须带宽来撑了。而它首先只加载了第一屏的图片，所以速度有很大的提升。
Read the rest of this entry »

11五

javascript的事件冒泡

分类： javascript 暂无评论

开头我们先来看个例子

提示：你可以先修改部分代码再运行。

上面是按照常规方法写的，但是不能达到我想要的效果，我想要我定义的行为都只作用在我指定的节点上，但是很明显，鼠标放里面那层上的时候同样触发了外层的相同行为（上面2个层都用的onmouseover）。还有中我们用的多的情况就是onclick，如果你再用onclick事件的节点的上层节点上也有同样的行为，一样会触发。这样给开发带来不少麻烦，有时候因为这个问题要调试很久都找不到原因，这个就是javascript事件冒泡。

最上级一直到document对象（有些浏览器是window）。在这里有个词语叫做“事件排序”，就是说子节点和父节点到底谁先执行呢？

Netscape说element1的事件先发生。这叫做捕获。

Microsoft说element2的事件先发生，这叫做冒泡。

W3C标准说是从外到里再从里到外，既然我们都用的W3C那么还是听他的。

怎么利用冒泡？

就拿我们的Phpwind的门户来说，门户模块的前台管理，鼠标放到整个模块的BOX的时候会出现管理2个字，这里就用到了，如果像文章开始说的需要精确到我指定的节点上的话，管理这个按钮就没这么容易出来了。

还有个应用就是我本身就需要子节点和父节点在我的一个动作的时候都执行给予他们的任务。

怎么阻止冒泡？

如果想精确到具体的节点而不往上冒就需要阻止它。

在子节点行为触发的函数结尾添加如下函数即可（各个浏览器兼容）

//阻止事件冒泡函数
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true
}

TOP

Videos, Slideshows and Podcasts by Cincopa Wordpress Plugin