山大芋折腾志

The world is a … 〇

Mootools事件代理2

之前po出来的事件代理太过简单,有不少缺陷,比如绑定的子对象存在层级关系时,事件触发就不能保持原有的冒泡顺序了。另外由于当时是取的e.target,所以只有当被代理的元素是最里层元素时菜靠谱,所以基本还是个残废=v=

因为马上就要出去玩了,这周的工作也没有安排太多,除了内部项目,主要就折腾这个了。当时没什么头绪,参考了前辈的代码很久,嚼透之后的感想就是这么简单个东西我为什么会花那么久去琢磨啊= =

废话少说,上demo!http://jsfiddle.net/Z7NhR/大家可以自行修改下玩玩。

其实最后很多思路和自己想的差不多,结构上这种写法感觉有点像jQuery插件的作风,自己的函数在一个大闭包里,最后再留个小辫子到外面来。模拟事件冒泡的关键函数就是_getBubbleElem这个了,每次触发外层监听容器(holder)的事件时,去算一遍事件队列中的事件所有者到它的距离,以此排个序再依次去触发就可以了。删除事件的时候去事件队列里把和参数相匹配的项拿掉就是。

js笔记

1.这个东西很有意思:

  1. function A(){
  2.  console.log(typeof this,typeof true,this===true)
  3. }
  4. A.call(true) //object boolean false

感觉就像在call的时候包了一层new Boolean()一样。一深究就头疼啊,不管它了。

2.判断鼠标事件是否是mouseover或者mouseout,看事件对象用没有relatedTarget这个属性就可以了。里面存的是与此次事件相关的Dom节点。
比如鼠标从div#a进入div#b,就会触发后者的mouseover事件,此时e.relatedTarget就是前者。

3.事件管理的东西,ghSky同学写过三篇文章,讲得很细致。1 2 3

4.判断属性是否为元素的标准属性,比如id存在于div中,而data-time没有,现在很多html5可用性检测就用到了此类技巧。这篇文章里说到了三种方法,并进行了性能比较。
那么如何检测浏览器是否支持某一css属性呢?方法是先设置后访问,不过不要去设置具体的属性,而是去设置cssText,如下:

  1. var a = document.createElement('div');
  2. a.style.cssText += 'float:left';
  3. console.log(a.style.float);//left
  4. a.style.cssText += 'blah:yeah';
  5. console.log(a.style.blah);//undefined

实验的时候也遇到一些疑惑。chrome里的style下好像是有filter的,但是filter具体做什么我不是特别明白。

  1. var a = document.createElement('div');
  2. console.log(a.style.filter); // undefined
  3. console.log(a.style.blah); // undefined
  4. a.style.filter='Alpha(Opacity=100)';
  5. console.log(a.style.filter); //''
  6. a.style.blah = 'yeah';
  7. console.log(a.style.blah);//yeah

5.这篇文章讲到了js中的constructor和prototype,解释了js的继承机制。感想是js很多地方都是你中有我我中有你,跟太极似的。另,文章看到最后按照前面的解释自己理一遍,觉得最后一张图好像有点问题啊有木有。

写的有点粗糙,反正自己看的,上班去了先=v=

Free Hugs

对于一个最近各色荷尔蒙分泌都有点儿过剩的青年,没有什么活动比Free Hug更能吸引他的了。

看到林竹同学在豆瓣上发起了这个活动,突然就变得满心想去迷笛。昨天下午和朋友Aki找到他们之后就迅速的加入了,期间渐渐有人加入,到最后变成几十人好长一排。

有路过不解的朋友好奇的询问目的是什么,为的是什么。我觉得这就像看完一篇文章问中心思想一样啦。其实别人的答案都不重要,重要的是你所能感受到的。在我觉得,最大的意义就是爱,传递爱,分享爱,自由的爱,无差别的爱。

不管你是正太萝莉大叔御姐老汉阿婆人妻女王小给蕾丝宅男腐女刺猬熊猫海龟土鳖小清新重口味外来妹快递员读书人科学家喜洋洋灰太狼怪兽凹凸曼……让我们拥抱吧。

当然,意义不止于此,更重要的是爱的传递可以一直继续下去,每个接受拥抱的人,都能够更爱自己,爱自己的亲人朋友,爱自己所身处的世界,去拥抱他们,告诉他们自己的感受,那些冰块都会为之融化的。

后来也有看到林竹在自己的微博上转达京都的住持告诉她的一句话,我觉得非常感同身受,在此记录下来 “你应该把别人对你的好,再发散给另外的人,让这个正能量循环起来,不管最后会不会回到你身上,做就好了。『记住别人给予你的,忘掉你给予别人的』”

活动的时候有老外询问Free Hug中文要怎么说,也有参与进来的老外很搞怪的在那里拿着10块钱喊“Ten yuan hugs!”。过去自己也将它作”免费拥抱”解,可是想想拥抱本来本来不就是免费的吗,译作“自由拥抱”或许才更加合适。

我想Free Hug正确的方式应该是张开双臂,给予需要的人拥抱,对于不愿意或者不方便的,那就传递一个微笑。最终的目的并不是去拥抱每个人,而是让更多的人感受到快乐,他们脸上的笑容就是付出最好的回报。有一位胖胖的白人大妈领着两个孩子,路过的时候非常自豪的对我们说“我天天都有Free Hugs”,我觉得她好棒!

最后说一些以后再有类似的活动要注意的地方。一个是参与者最好把挂坠以及插在胸前的眼睛取下来,不然可能会在拥抱中磕到碰到引起不必要的损失。另外,在活动的同时,大家应该尽量避免过久的围观以免阻塞正常的交通人流。

还有就是要更关注手上的垃圾跟脚下的土地。后来看到林竹跟南瓜子在收拾场地周围的垃圾真的有被打动到。但是个人的力量肯定有限,以后这样的露天活动大家可以顺手带上一个垃圾袋,或者组织者可以考虑在门口发放。都说日本人民素质好,我们也不会输给他们对不对!?

Mootools事件代理

写了一个用于事件代理的小函数,更多功能有待完善。

  1. function Delegate(holder,select,type,fn){
  2.  holder = $(holder);
  3.  holder.addEvent(type,function(e){
  4.   var c = holder.getElements(select);
  5.   if( c.contains(e.target)){
  6.    fn.call(e.target,e);
  7.   };
  8.  });
  9. }

用法:

  1. Delegate('wrapper','a.inner','click',function(e){
  2.  console.log(e.target);
  3. });

由于javascript的事件有向里捕获与向外冒泡的过程,外层容器可以在冒泡阶段获得来自内层容器的事件,继而进行处理。

这种做法可以有效避免在内层元素被添加,改变时额外的绑定事件的开销,对于比较复杂的应用很有实际意义。

缺点是一些接口事件,如focus,blur等不存在冒泡的过程,需要用其他办法去hack之。

参考

自定义鼠标指针

这篇文章讲的比较清楚

 

补充几点:

1.一些浏览器下需要使用绝对路径。

2.IE会将长宽不等的图标文件拉伸到相等,所以做图的时候要注意了,推荐32×32的cur文件。