YUI的Event.onDOMReady的一个小tip
3 comments so far使用yui库的朋友，我们常常用到YAHOO.util.Event.onDOMReady来给网页添加一些函数，比如下面的一段代码：
———————–javascript———————–
var Y=YAHOO.util,D=Y.Dom,E=Y.Event;
function a(){
alert(’a');
return;
}
function b(){
alert(’b');
return false;
}
function c(){
alert(’c');
return;
}
E.onDOMReady(a);
E.onDOMReady(b);
E.onDOMReady(c);
————————————–
如果函数b的运行中出现return false，那么c函数就不会运行了。所以当我们用onDOMReady狂加函数的时候，注意函数的返回，在这里用return false;的时候就要注意了哦。但是return;是ok的，不会影响到下一个函数的运行。
我们在自己小心的同时，这个是否也是yui的onDOMReady的一个小bug呢，毕竟如果其中一个函数return false就出导致后面的都不运行了有点不爽，而如果我们换成下面这样的方式就是ok的
——————javascript————————
E.on(window,’load’,a);
E.on(window,’load’,b);
E.on(window,’load’,c);
——————————-
c函数运行畅通无阻。
说明Event.on就考虑的比较周到。
还有呢：
使用onDOMReady添加的一些函数，如果出现非语法错误（什么是语法错误？你狂拍键盘就知道了，注意我这里是非语法错误）是不报错的（比如某个函数找不到）。但是用E.on的时候，任何错误都会报出来让调试。
题外话：有错就报别闷着，有时候我们设计库方法（或dpl）的时候，也千万别让自己函数的容错能力太强，这反而让那些使用你的库的人在出错的时候不知道从哪里调试了。
三种事件绑定方式中监听函数内部的this指向的区别
No comments先定义一个回调函数
———–script———–
function handler(){
alert(”this:”+this+”—–(this===window):”+(this===window));
}
—————————
方式1：使用attachEvent(ie)或addEventListener绑定事件，如下：
————-html——————
<button id=”a”>按钮</button>
————-script—————–
ZY.addEvent($(’a'),’click’,handler);//ZY.addEvent封装了attachEvent和addEventListener
———————————–
结果：用attachEvent或addEventListener绑定的事件回调函数中，this指向的是{ie:window,firefox:元素自身}
方式2：在按钮标签内部绑定
————-html—————–
<button id=”b” onclick=”handler();”>按钮</button>
———————————-
结果：在标签内部直接绑定事件的时候，回调函数中的this指向的都是window
方式3：用on[eventtype]来绑定
————-html—————–
<button id=”c”>按钮</button>
————-script—————–
$(’c').onclick=handler;
———————————-
结果：用element.onclick=handler绑定的事件回调函数中的this指向的都是元素自身
ok，就是这样。
原因待日后整理完再补上.
update 2009-05-16:
以下是个人的理解：
1.attachEvent和addEventListener虽然是针对绑定多事件在不同浏览器上的实现方法，但是猜测其内部的运行机制一定有着不同（希望有高人指点），鉴于他们在使用的时候一个有on，一个没有。暂且理解成attachEvent是方法2的一种扩展，而addEventListener是通过元素的原生click方法去实现事件的绑定，所以this指向自身。
2.元素标签内部的onclick绑定其实绑定的是一个匿名函数（firefox和safari会自动把这个匿名函数命名onclick函数），这个匿名函数的内容就是标签内onclick=后面引号内的语句。所以在这个匿名函数体内的handler的运行环境其实是window。所以this指向的是window。
3.在脚本里添加的onclick=handler,则是直接将函数绑定到元素的onclick事件（或者说是onclick属性）上，那么该
handler其实是该元素对象的一个函数属性，而对象的属性如果是一个函数，那么函数体内的this指向的是该对象。
最后，给出mdc上面关于addEventlistener的详细介绍，可能比我说的更清晰：
https://developer.mozilla.org/En/DOM:element.addEventListener
还有小虎对this的概括：
http://www.macji.com/2009/01/18/javascript-this-keyword-tips/
背景色透明内容不透明的解决方法
1 comment so far效果：
html代码结构：
—————————
<div class=”container”>
<div class=”content”>你好，很高兴见到你</div>
</div>
—————————
css
—————————
.container {
margin:160px 270px;
padding:10px;
float:left;
background:#333;
background:rgba(0,0,0,0.4);
filter:alpha(opacity=40);
}
.container .content{
position:relative;
padding:10px;
border:1px solid #ffffff;
color:#fff;
}
—————————
兼容：
—————————
ie（6/7/8）,firefox,safari
可惜opera还不支持，哪位兄弟指点下
—————————
关键代码行解释：
—————————
.container {
margin:160px 270px;
padding:10px;
float:left;
background:#000;
background:rgba(0,0,0,0.4);//ie还不识别（for firefox and safari）
filter:alpha(opacity=40);//设置父容器的整体透明度（for ie）
}
.container .content{
position:relative;//让子容器摆脱父容器的透明，没有这行则子容器在ie下也是透明的（for ie）
padding:10px;
border:1px solid #ffffff;
color:#fff;
}
————————-
总结：
1.firefox，safari，可以通过background:rgba(0,0,0,0.4)来直接设置透明的背景色；
2.ie下通过给子容器加position:relative;父容器加透明滤镜，实现本例效果；
3.opera不识别background:rgba(0,0,0,0.4)opera10开始支持了；
ps：
不知道，wordpress可不可以自己制作demo页，有知道的兄弟支一声，最后附上全部代码
——————————————
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=GBK” />
<style type=”text/css”>
body{
background:url(’pic1.jpg’);
}
.container {
margin:160px 270px;
padding:10px;
float:left;
background:#000;
background:rgba(0,0,0,0.4);
filter:alpha(opacity=40);
}
.container .content{
position:relative;
padding:10px;
border:1px solid #ffffff;
color:#fff;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”content”>你好，很高兴见到你</div>
</div>
</body>
</html>
————————————
META
No comments各位奋战在UED前端第一线的兄弟姐妹们，我也开始写博客了，首先向那些已经奋战许久的乐于分享的兄弟姐妹们致敬。今天我也加入进来，写不出什么旷世绝章，但求能把工作中学到的，思考过的，总结出来和大家一起分享，为前端事业出把力！曾经担心自己的文字会不会徒增互联网的存储负担，看来我真的担心的太多了。好吧，即使当炮灰，我也上了。谢谢！可以鼓掌了：）
editplus其实也很牛
No comments这几天和同事谈到vim，网上也看了一些关于vim的信息，很强很专业。可惜上手的难度很大，折腾了2天，上手还真有点困难，于是乎重回我一直在用的editplus，并且花了半天的时间仔细研究它，原来editplus也有相当强大的功能以前没被使用，下面列了一些可能会常常用到的功能和快捷键：
1.选择类：
选择单词：ctrl+w
选择单行：ctrl+r
2.删除类：
删除单词：alt+delete
删除单行：alt+shift+delete
删除空行
3.格式重排：ctrl+shift+r
4.视图：制表符，空格，换行符，标尺，行号，
5.全屏显示：alt+shift+0
6.在文件中搜索
7.标签匹配：ctrl+[；标签选择：ctrl+shift+[；括号(([{)匹配：ctrl+]；括号选择：ctrl+shift+]
8.函数列表：ctrl+f11（默认列出js文件中用function定义的函数）
9.制表符和缩排的设置
10.自动换行：ctrl+shift+w
11.代码折叠：ctrl+shift+f
12.代码补齐：（设置你的html[css|javascript].acp文件）
13.转到行：ctrl+g
14.项目：管理项目使用（比如某个功能需要打开html，css，javascript共n个，可以把这些列为一个项目，并命名，下次直接载入项目，就打开了项目中的所有文件，不用一个个去找了）
15.工具：首选项里有好多设置，包括文件样式，字体，模板等等好多好多，慢慢摸索一定很有收获的哦。
下面给出我的editplus现在的靓照，全屏，去掉任何多余的工具栏，全依赖快捷键，够专业吧！
