テーブルのハイライト
ここで,
といっても,
:hoverで背景色を変更
tr:hover{
background-color:#ffffaa;
}
1 | 2 | 3 |
4 | 5 | 6 |
7 | 8 | 9 |
この通り,
では,
マウスオーバーで背景色を変える実装
window.onload = function(){
var table=document.getElementById('js5-table');
var trs = table.getElementsByTagName('tr');
for (var i = 0, len=trs.length;i < len; i++){
var tr = trs[i];
tr.onmouseover = function(){
tr.className = 'hover';
};
tr.onmouseout = function(){
tr.className = '';
};
}
};
一見上手く動きそうに見えるコードですが,
マウスオーバーで背景色を変える実装
window.onload = function(){
var table=document.getElementById('js5-table');
var trs = table.getElementsByTagName('tr');
for (var i = 0, len=trs.length;i < len; i++){
var tr = trs[i];
tr.onmouseover = function(){
tr.className = 'hover';
};
tr.onmouseout = function(){
tr.className = '';
};
}
};
この通り,
ではこの問題を解決するにはforループの中,
マウスオーバーで背景色を変える実装
window.onload=function(){
var table=document.getElementById('js5-table');
var trs = table.getElementsByTagName('tr');
for (var i = 0, len=trs.length;i < len; i++){
var tr = trs[i];
(function(_tr){
_tr.onmouseover = function(){
_tr.className = 'hover';
};
_tr.onmouseout = function(){
_tr.className = '';
};
})(tr);
}
}
このようにforループ内に関数を作り,
クロージャを避ける
さて,
クロージャを避ける方法は単純で,
マウスオーバーで背景色を変える実装
for (var i = 0, len=trs.length;i < len; i++){
var tr = trs[i];
tr.onmouseover = function(){
this.className = 'hover';
};
tr.onmouseout = function(){
this.className = '';
};
}
もしくは,
マウスオーバーで背景色を変える実装
for (var i = 0, len=trs.length;i < len; i++){
mouse_hightlight(trs[i]);
}
}
function mouse_hightlight(tr){
tr.onmouseover = function(){
tr.className = 'hover';
};
tr.onmouseout = function(){
tr.className = '';
};
}
ただし,
このように同じ機能を実現する際に色々と工夫ができるところはプログラミングの面白さでもあります。是非,
最後に,
最適化前は初期化が重く,
最適化の内容は,
まとめ
今回はJavaScriptにおいて重要なクロージャを中心とした関数の扱いを解説しました。次回からはクロスブラウザの最大の難所であるDOMについて紹介しつつ,