事件(Event)是JavaScript應用跳動的心髒,也是把所有東西粘在一起的膠水,當我們與浏覽器中Web頁面進行某些類型的交互時,事件就發生了。
第一種監聽方式,也是最普遍使用的方式,是直接在代碼上加載事件,產生效果:
<table> <tr onmouseover='this.style.backgroundColor="red"' onmouseout='this.style.backgroundColor=""'><td>text1</td><td>text2</td></tr> <tr onmouseover='this.style.backgroundColor="red"' onmouseout='this.style.backgroundColor=""'><td>text3</td><td>text4</td></tr> <tr onmouseover='this.style.backgroundColor="red"' onmouseout='this.style.backgroundColor=""'><td>text5</td><td>text5</td></tr> </table>
第二種監聽方式,是使用DOM的方式獲取對象,並加載事件:
<table> <tr><td>text1</td><td>text2</td></tr> <tr><td>text3</td><td>text4</td></tr> <tr><td>text5</td><td>text5</td></tr> </table> <script> doms = document.getElementsByTagName('tr'); for(i=0;i<doms.length;i++) { doms[i].onmouseover = function() { this.style.backgroundColor = "red"; } doms[i].onmouseout = function() { this.style.backgroundColor = ""; } } </script>
第三種監聽方式,是使用標准的addEventListener方式和IE私有的attachEvent方式,因為IE的attachEvent方式在參數傳遞時的缺陷,這個問題被搞得稍許有些復雜了:
<table> <tr><td>text1</td><td>text2</td></tr> <tr><td>text3</td><td>text4</td></tr> <tr><td>text5</td><td>text5</td></tr> </table> <script> doms = document.getElementsByTagName('tr'); function show_color(where) { this.tagName ? where = this : null where.style.backgroundColor = "red"; } function hide_color(where) { this.tagName ? where = this : null where.style.backgroundColor = ""; } function for_ie(where,how) { return function() { how(where); } } for(i=0;i<doms.length;i++) { try { doms[i].addEventListener('mouseover',show_color,false); doms[i].addEventListener('mouseout',hide_color,false); } catch(e) { doms[i].attachEvent('onmouseover',for_ie(doms[i],show_color)); doms[i].attachEvent('onmouseout',for_ie(doms[i],hide_color)); } } </script>
在綁定多個相同的事件的時候,前兩種方法會產生覆蓋,而第三中方法則會同時執行多個事件。