addEventListener() 类似于 IE 的 attachEvent()

</p> <p><button id="oButton1" onclick="alert(1)">美丽的按钮</button></p> <p><button id="oButton2">更美丽的按钮</button></p> <p><script></p> <p>document.getElementById("oButton2").addEventListener("click",function(){alert(2);oButton1.click()},false)</p> <p>//document.getElementById("oButton2").attachEvent("onclick",function(){alert(2);oButton1.click()},false) // IE使用这个</p> <p></script></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

The CSS Anthology: 101 Essential Tips, Tricks and Hacks

来自 sitepoint 很不错的书，非常完整全面。

http://www.sitepoint.com/books/cssant1/cssant1-sample.pdf

以前摘选过部分

showlog.asp?cat_id=31&log_id=1931

1.如果字符串是html代码，最好这样 strHTML=’

‘

单引号在外面，双引号在里面。

2.后者效率更高

</p> <p>// Bad way</p> <p> function changeObject( oId )</p> <p> {</p> <p> document.getElementById( oId ).className = ‘blah’;</p> <p> document.getElementById( oId ).setAttribute( “alt”, “new text” );</p> <p> }</p> <p> // Good way</p> <p> function changeObject( oId )</p> <p> {</p> <p> var o = document.getElementById( oId );</p> <p> o.className = ‘blah’;</p> <p> o.setAttribute( “alt”, “new text” );</p> <p> }</p> <p>

3.类似这样的判断

if ( someVar == “someString” )

if ( myNum == 3 )

最好把变量写在后面

if ( “someString” == someVar )

if ( 3 == myNum )

好处就是，一旦你把 == 错写成 = 就会报错，而且即使在IE中，错误的行号都是正确的。

4.空字符串的布尔值

</p> <p><script type="text/javascript"></p> <p>a="";</p> <p>alert(Boolean(a));</p> <p>b=" ";</p> <p>alert(Boolean(b));</p> <p></script></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

5. ; 号结束一个语句

</p> <p><script type="text/javascript"></p> <p>for (a=0,b=9;a<b;a++) document.write (a);</p> <p>document.write (" <br/>“); //line break</p> <p>for (a=0,b=9;a<b;a++); document.write (a);</p> <p></script></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

6. with 语句的变化

</p> <div id="test">我喜欢许巍!</test></p> <p><script type="text/javascript"></p> <p>d=document;</p> <p>{</p> <p> alert(d.getElementById("test").childNodes[0].nodeValue)</p> <p>}</p> <p></script></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

7.微软的 attachEvent() 对应 W3C 推荐的 addEventListener()

以前的 js 常见问题：

showlog.asp?cat_id=31&log_id=1978

showlog.asp?cat_id=31&log_id=1977

showlog.asp?cat_id=31&log_id=1976

</p> <p><button onclick="if(event.srcElement){obj=event.srcElement}else{obj=event.target};alert(obj.tagName)">美丽的按钮</button></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

guoshuang2005-06-28+opera 对 event.target或者event.srcElement 都支持。

也是老生常谈了，但我经常不注意这个问题。

</p> <p>var str = “qing”;</p> <p> for ( var i = 0; i < myString.length; i++ )</p> <p> {</p> <p> alert( myString.charAt( i ) );</p> <p> }</p> <p>

下面这个好,因为只计算一次 myString.length。

</p> <p>var str = “qing”;</p> <p> for ( var i = 0,oLength = myString.length; i < oLength; i++ )</p> <p> {</p> <p> alert( myString.charAt( i ) );</p> <p> }</p> <p>

这个更有意思。当给变量赋值的时候，会返回这个值（有值就为 true），所以下面这个更简洁。

</p> <p>var myString = “qing”;</p> <p> for ( var i = 0; ( c = myString.charAt( i ) ); i++ )</p> <p> {</p> <p> alert( c );</p> <p> }</p> <p>

这个代码也很有意思，刚开始没反应过来，不知道怎么回事

</p> <p><script type="text/javascript"></p> <p>function blastoff( timer )</p> <p> {</p> <p> var notice = "";</p> <p> switch( timer )</p> <p> {</p> <p> case 10 : notice += "Ten, ";</p> <p> case 9 : notice += "Nine, ";</p> <p> case 8 : notice += "Eight, ";</p> <p> case 7 : notice += "Seven, ";</p> <p> case 6 : notice += "Six, ";</p> <p> case 5 : notice += "Five, ";</p> <p> case 4 : notice += "Four, ";</p> <p> case 3 : notice += "Three, ";</p> <p> case 2 : notice += "Two, ";</p> <p> case 1 : notice += "One, ";</p> <p> case 0 : notice += "Zero, ";</p> <p> default : notice += "Blastoff!";</p> <p> }</p> <p> return notice;</p> <p> }</p> <p> alert( blastoff( 10 ) );</p> <p> alert( blastoff( 5 ) );</p> <p></script></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

好处在于，搜索引擎也可以追踪这样的链接，而仅仅是 href=”#” 浏览器是不知道目的链接页面地址的。

</p> <p><a href="whateverPage.htm" target="new" onclick="window.open( this.href, this.target, 'whatever features you want here' ); return false;">Click here!</a></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

老生常谈了，记录复习一下…

</p> <p><script type="text/javascript"></p> <p>qing = "my lover";</p> <p>alert(window["qing"])</p> <p>alert(window.qing)</p> <p></script></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]