先日開催された、Kanasan.JS JavaScript第五版読書会#7のレポートです。 今回はCSSとイベント処理の入門的内容でした。
ご参加頂いた皆様、ありがとうございました。
それ程難しくはないので、簡単にまとめておきます。
Element.style.colorなど、Element.style.〜のスタイルオブジェクトで操作出来るのは、 インライン指定されたスタイルのみなので気を付ける必要があります。
僕も最初の頃は知らずによく間違えていたのですが、これを知っていると無駄に時間を使わなくて済むと思います。
<style>
#foo {
background-color : #000;
}
</style>
<span id="foo" style="font-size:20px">bar<span>
<script type="text/javascript">
function hoge(){
alert( document.getElementById('foo').style.fontSize );
alert( document.getElementById('foo').style.backgroundColor );
}
</script>
bar
上記コードを実行すると分かりますが、インラインで定義したものしか取得出来ないので、注意が必要です。
各要素にインラインでCSSを指定するには、前述の方法でいいのですが、次は外部CSSや埋め込みのstyle要素の扱いです。
ほとんど使った事がなかったのですが、document.styleSheetsを使って、操作が出来ます。
IEの場合はプロパティやメソッド名が違うので少しだけ注意が必要ですが、以下のリンクが参考になります。
ここまでで、JavaScriptからインラインで書かれたCSSや、外部CSS、style要素で書かれたCSSの値を取得出来る事が分かりました。
但しこのままでは、最終的にどういうCSSが当たっているかが分かりません。
そこで現在のスタイル値を参照出来るのが、getComputedStyle()メソッドです。
getComputedStyle()については、id:amachangのエントリが詳しいです。getComputedStyle について調べてたら深みにハマったのでメモ - IT戦記
少し付け加えると、amachangのエントリでは、Safariの場合はdefaultViewからしか取れないと書かれていますが、
Safariもバージョン3からは取得出来るようで、手元のWin版ver3.2.2で確認すると、そのまま取得出来ました。
理論値（算出スタイル）と実測値を補足すると、例えばCSSでフォントに「MSゴシック」を指定したとします。
「MSゴシック」がないPCで見た時は、ブラウザにより適当なフォントに置き換えられるのですが、この時に、
CSSで指定されている「MSゴシック」を返すのがgetComputedStyle、
実際に使用しているフォントを返すのがcurrentStyleです。とはいえ、currentStyleもどこまで正確かは怪しいようです。
以下、参考リンク。
JavaScriptからCSSを扱う為の方法を表にしておきます。（表をクリックで拡大）
| 対象 | 普通のブラウザ | IEなブラウザ |
|---|---|---|
| インラインスタイル |
Element.style.color
|
|
| 外部CSS、style要素 |
スタイルシート（配列で複数定義されている）
スタイルシートの数
スタイルシート内のルールオブジェクト（配列で複数定義されている）
ルールのセレクター
スタイルオブジェクト（Element.style）と同じ使い方が出来る
ルールのテキスト全体（innerHTMLのイメージ）
|
スタイルシート
スタイルシートの数
スタイルシート内のルールオブジェクト（IEはcssRulesではなく、rules）
ルールのセレクター
スタイルオブジェクト（Element.style）と同じ使い方が出来る
ルールのテキスト全体（innerHTMLのイメージ）
|
| スタイルシートへのルール追加 |
CSSルールのテキストと挿入インデックスを指定
|
セレクタとスタイルを分けて指定。オプションで第三引数に挿入インデックス（デフォルトは最後）
|
| 有効になっているスタイルの参照 |
第一引数はHTMLElement。第二引数は擬似要素で、通常はnullを使う。
|
IEはHTMLElementがcurrentStyleというプロパティを持っている。
厳密にはgetComputedStyle()で取得出来る値と違う。
|
見出しの通りなのですが、link要素にもdisabledが使えるようです。
但し、HTML要素ではなく、JavaScriptから操作する必要があります。
<html>
<head>
<link id="example" type="text/css" rel="stylesheet" href="example.css" />
</head>
<body>
<script type="text/javascript">
function hoge(){
document.getElementById('example').disabled = true;
}
</script>
<button type="button" onclick="hoge()">CSSをオフ</button>
</body>
</html>
あまり使い所は少ないかも知れませんが、ユーザー側でCSSのオンオフをさせたい時はいいかも知れません。
あとはCSS Naked Dayに合わせて、ページ読み込み時にJavaScriptでCSSをオフにするぐらいしか、使い所が思い浮かばない。
CSS Naked Dayを忘れないためのJS - Webtech Walker
ここまで書いておきながら言うのも何なのですが、CSS自体の操作はあまり行わない方がいいかなと思っています。
基本的にプログラムと見栄えの分離をするべきだと考えているので、手軽に書く時に使うのはいいですが、 保守性が悪くなるので、多用するべきではないと思っています。
ちょこっとだけ書く時（例えばdisplayのオン/オフとか）に利用する分には便利だと思いますが、 それこそスタイルシートオブジェクトを必要とするような、しっかり書く必要がある時は、 JavaScriptからスタイルを操作するのではなく、予め外部CSS等でスタイルを定義しておき、 classの追加等でスタイルを切り替える方が保守しやすく、HTML、CSS、JavaScriptの分離が行いやすいと思います。
最初に結論。
同じ要素に複数のイベントハンドラを割り当てる必要がある時は、素直にライブラリを使う。
主にIEでイベント処理の実装が他のブラウザとかけ離れすぎている為なのですが、 Operaも細かい挙動で違いがあるという話も出ていました。
イベント周りは、今までの経験上でもブラウザ毎の差異が大きい部分と感じます。
onclickなどのイベントタイプですが、ブラウザ毎に使える種類とその挙動に違いがあります。
今回読んだ範囲では、ブラウザ間の違いはほとんど触れられていなかったので、参考リンクを張っておきます。
Javascript - Event compatibility tables
英文ですが、イベントタイプとサポートされるブラウザが表になってまとまっており、とても参考になります。
JavaSctiptのイベントには二つの種類があり、これは似て異なるものです。
element.onclick = foo
<div onclick="foo()"></div>
のような、イベントの定義をDOM Level0のイベント、
element.addEventListener( 'click', foo, false );
のような、addEventListenerを使ったイベント処理をDOM Level2のイベントと呼ぶそうです。
この辺りはあまり分かっていなかったので、今回は勉強になりました。
W3Cが定めているDOMの仕様が決まる前のイベントであるDOM Level0に対して、 DOM Level2で定められているイベントが優れているのは、主に以下の2点です。
つまりDOM Level2の方が色々出来るぜ！という事なのですが、あくまでW3Cが定めている仕様で、 実装状況はブラウザ毎に異なります。
IE以外は大体仕様に沿っているのですが、IEはひたすらGoing my wayです。
IEのattachEventで追加したイベントハンドラを除き、基本的にハンドラ内の「this」 はイベントが発生した要素のHTMLElementオブジェクトになります。
ここで気を付けないといけないのが、オブジェクトのメソッドをハンドラとして渡した際のthisが変わる事です。 IEでは使えませんが、addEventListenerを例にします。
var obj = {
prop : 'property',
handle : function(){
alert(this.prop);
}
};
document.body.addEventListener('click', obj.handle , false);
上記のコードを実行した際に、obj.propの「property」が呼ばれそうですが、実際にはundefinedです。
これは、thisがイベントの発生したHTMLElementになる為です。
上記のような時はどうするかというと、人によってやり方は違うかも知れませんが、僕はクロージャーを使う事が多いです。
var obj = {
prop : 'property',
handle : function(){
alert(this.prop);
}
};
document.body.addEventListener('click', function(event){
obj.handle();
}, false);
他にはapply()でラップした関数オブジェクトを渡す方法があります。 Prototype.jsのbind()とかbindAsEventListener()はaplly()でラップしたものを返しているだけです。
イベントは伝播します。子から親へ伝わります。子要素で起きたイベントは、必然的に親要素にも伝わります。
これはDOM Level0もLevel2も同じです。
今回の範囲を読むまであまり意識していなかったのですが、イベントにはバブリングという、 親要素にイベントが伝播していく仕組みがあります。
<span style="background-color:#CCC;" onclick="alert('foo')" >
上記のコードを<a href="javascript:void(0)" onclick="alert('bar')">実行してみる</a>
</span>
上記のコードを実行してみる
例の場合、リンクをクリックすると、その親要素のonclickも実行されます。HTML上の親要素を辿りながら同じイベントが実行されていく事をバブリングというそうです。
このバブリングを含めて、DOMで定められているイベントの伝播には3つのフェイズがあります。
1はイベントが発生したノードのルートノードから、イベントが発生したノードまで、親から子に向けてイベントハンドラを捕捉して実行します。
2はイベントが発生したノードのイベントハンドラを実行します。
3はイベントが発生したノードから順番に子から親に向けて、ルートノードまでの各ノードのイベントハンドラを実行。
以上のような流れでイベントが実行されます。英文ですがW3Cの図が分かりやすいです。
Document Object Model Events(英文)
DOM Level0は2と3のみで、DOM Level2だと、1〜3になります。
この仕組み自体は一長一短で、
使い方によっては便利でもあり、不便でもあります。
これはEventオブジェクトでコントロール可能で、途中でバブリングを停止する事が出来ます。
イベントハンドラはEventオブジェクトを扱う事が出来ます。
そのイベントが発生したノード等、イベントに関する情報が入っているオブジェクトです。
IEはwindow.eventにイベントオブジェクトが定義され、それ以外のブラウザはイベントハンドラの第一引数に渡されます。
DOM Level0の場合は、以下のようなコードでEventオブジェクトが取得出来ます。
<button type="button" id="clickhandle">JSから定義</button>
<button type="button" onclick="var e = event || window.event; alert(e)">onclick属性で定義</button>
<script type="text/javascript">
function clickhandle(event){
//window.eventはIE
var e = event || window.event;
//window.event.srcElementはIE
var elem = e.target || e.srcElement;
alert(elem.id);
}
document.getElementById('clickhandle').onclick = clickhandle;
</script>
onclick属性の中で直接コードを書く場合は、暗黙的にeventという変数に入っているみたいです。
イベントハンドラはこのオブジェクトを使って、ターゲットノードを特定したり、バブリング中のカレントノードを知る事が出来ます。
また、バブリングを途中で停止させるメソッドも、このイベントオブジェクトが持っています。
詳細は以下を参考にどうぞ。
IEの話は一先ず置いておき、通常のブラウザの話からです。
DOM Level2である、addEventListenerを使った処理を見ていきます。
addEventListenerはIE以外の主なブラウザで使えます。
以下、サンプルコード
var handle = function(){
alert('handle');
}
document.body.addEventListener('click', handle , false);
DOM Level0では一つのイベントハンドラしか設定できませんが、DOM Level2では複数登録出来ます。
但し、複数のイベントハンドラを定義した時は、登録された順で実行されるとは限らない事に注意する必要があります。
また、addEventListenerに渡すハンドラーはfunctionオブジェクトでなくても、handleEventをメソッドとして持つオブジェクトも渡せるようです。
handleEvent、addEventListener - 素人がプログラミングを勉強するブログ
addEventListenerの第三引数をtrueにすると、バブリングフェイズではなく、キャプチャーフェイズで実行されるようになります。 つまり子要素でイベントが発生したとしても先に処理が出来ます。
最大の鬼門です。
読んでいる時は皆一言も喋らなかった。読み終わってからも。
笑えない実装内容でした。
実装している内容としては、DOM Level2に満たない内容で、独自実装の色が強いです。
ここで言うIEは6と7を指していて、試してないですが恐らく8も同じだと思われます。
多くのブラウザがaddEventListenerでイベントを登録するのに対して、IEはattachEventというメソッドを使います。
但し、DOM Level2を満たしていないので、addEventListenerのように第三引数がなく、キャプチャーフェイズでの実行は不可です。
また、ここで登録されたイベントハンドラはグローバル関数となり、thisにはwindowオブジェクトが入ります。これがどういう問題を起こすかは後述します。
IEのイベントオブジェクトはwindow.eventで参照出来ます。
addEventListenerの場合はハンドラにEventオブジェクトが渡されますが、IEはwindow.eventを参照する必要があります。
イベントは平行して起こらない為、その都度上書きすればいいという考えのようです。
以下はよくあるクロスブラウザを考慮したイベントハンドラのコードです。
function handle(event){
var event = ( event || window.event);
}
IEのattachEventを使った場合は、イベントが発生した要素が分からないという問題があります。
上記のような問題があります。
よくあるメモリリーク対策としては、 ページが閉じられる時に、イベントを解除して、メモリリークを途中で止める という形が多いようです。
読書会の後に色々調べた所、finalyを使って循環参照を削除する方法もあるようです。
IE6のメモリリークを華麗に回避 - zorioの日記
参考
CSSの標準対応は大分進んだようですが、イベント周りは変更する気があるのかないのか、そのままのようです。
今回の読書会と直接関係はないですが、IE8については以下もリンク張っておきます。
いつも思うのですが、サイ本がIEを解説する時の文章には、悪意が感じられます。
表をクリックで拡大出来ます。
| 項目 | DOM Level0 | DOM Level2 | ||
|---|---|---|---|---|
| 普通のブラウザ | IEなブラウザ | 普通のブラウザ | IEなブラウザ | |
| thisキーワード | 処理されているイベントのHTMLElement | windowオブジェクト | ||
| 複数のハンドラ | 不可 | 可 | ||
| Eventオブジェクト |
handle(event){ alert(event) }
<div onclick="alert(event)"></div>
|
handle(){ alert(window.event) }
<div onclick="alert(window.event)"></div>
|
handle(event){ alert(event) } |
window.event |
| ハンドラの割り当て |
document.body.onclick = hoge;
<div onclick="hoge()">click</div>
|
document.body.addEventListener('click', function(){}, false) |
document.body.attachEvent('onclick', function(){}) |
|
| ハンドラの解除 |
document.body.onclick = null
DOM Level0のハンドラを解除した事が無かったのだけど、Firefoxはnullにすると実行されなくなった。
他のブラウザは分からない。
|
document.body.removeEventListener('click', function(){}, false) |
document.body.detachEvent('onclick', function(){}) |
|
| カレントノードの取得 | event.currentTarget（又はthisでも取得出来る） |
thisで現在処理中のノードを参照出来る |
event.currentTarget（又はthisでも取得出来る） |
クロージャーを使う（しかしメモリリークの問題がある） |
| ターゲットノードの取得 | event.target |
event.srcElement |
event.target |
event.srcElement |
| キャプチャーフェイズでの実行 | 不可 | addEventListenerの第三引数をtrueにする事で可能 | 不可 | |
| バブリングの停止 | event.stopPropagation(); |
event.cancelBubble = true; |
event.stopPropagation(); |
event.cancelBubble = true; |
| formのサブミットやリンクの遷移をキャンセル |
<a href="javascript:void(0)">link</a>
<form onsubmit="return false;"></form>
又はEventオブジェクトを使う方法もある
|
event.preventDefault(); |
event.returnValue = true; |
|
ここまでで、イベント処理の概要が掴めました。個人的にあやふやなまま覚えていたイベント周りの処理が理解出来て良かったです。
この状態で、2008年5月のid:amachangのエントリを見ると、さらに理解が深まります。
そもそもライブラリのイベント割り当てを使わずに、DOM Level0のonclick属性を書くのは古いよね？という話から始まっていて、
という三択で保守性がどうのという議論みたいになっているのですが、JavaSctiptのイベントを分かっているかどうかで、見る角度が全く変わる記事だと思います。
一年前に読んだ時と比べて、別のエントリのような感覚がしました。
当時は先のエントリのコードを見ても何も思わなかったですが、今は少し進歩したようで、
本気でやるならonclick属性は避けてライブラリを活用すべき - id:HolyGrailとid:HoryGrailの区別がつかない日記onclick 属性問題について - IT戦記なぜonclickをあまり推奨しないのか
onclick 属性を使わないことによって本質的ではないことをたくさん書かないといけない
上記に書かれている事が理解できました。
また、先のid:amachangのエントリのコメント欄から、IEのメモリリークの問題は2007年に修正されたという情報もあります。
IEのメモリリークが直ってるっぽい。 - zorioの日記
やっぱりIEのメモリリークは直ってなかった - zorioの日記
環境がなくて未確認なのですが、nanto_viさんが解説してくれる事に期待。
イベント周りの結論としては、今回の読書会であったような、色々と面倒な事が多いので、素直にライブラリを使った方がよいですが、 ちょっと書くだけならDOM Level0のonclick="hoge()"みたいに使うのもありだと思います。
少しのイベント処理を入れる為だけに、重たいライブラリを導入するのはためらいますし、DOM Level0の出番は多いと思います。 DOM Level2が必要になった段階では、ライブラリを導入すればいいかなというのが、個人的な一応の結論です。
このエントリのテーブルを見やすい大きさで表示しようとすると大きすぎるので、拡大縮小出来るスクリプトをやっつけで作りました。
もうちょっと綺麗に書けそうですが、現状で公開しておきます。
以下みたいな感じで使います。
<script type="text/javascript">
function zoomTable( min, max ){
var tables = document.getElementsByTagName('table');
var target = tables[tables.length-1];
target.onclick = function(){
if( this.style.fontSize == min ){
this.style.fontSize = max;
if( this.className.search(/\bzoomout\b/) != -1 ){
this.className = this.className.replace( /(\b)zoomout(\b)/g, '$1zoomin$2' );
}else{
this.className = this.className + ' zoomin';
}
}else{
this.style.fontSize = min;
if( this.className.search(/\bzoomin\b/) != -1 ){
this.className = this.className.replace( /(\b)zoomin(\b)/g, '$1zoomout$2' );
}else{
this.className = this.className + ' zoomout';
}
}
}
target.onclick();
}
</script>
<table>
<tr>
<td></td>
</tr>
</table>
<script type="text/javascript">
zoomTable('40%','100%');
</script>
tableの後にzoomTableという関数を、縮小時のフォントサイズと拡大時のフォントサイズを指定して呼び出します。
縮小時にはzoominというclassが、拡大時にはzoomoutというclassが定義されるので、適当なスタイルを当てて下さい。
一部のブラウザしか対応していませんが、私はマウスカーソルが虫眼鏡になるようにしています。
cursor:url()を使って、PNG画像のURLを指定しるのですが、
Firefox、Safari、Google Chromeは対応して、Operaは未対応のようです。IEは.curに変換すればいけそうですが、今回はパス。
最後に少し感想を。
運営側としての反省点は、告知が直前になってしまった事が、特に申し訳なかったと思っています。
あと毎回気になるのがネットワークです。やはり会場次第かなー、という気がします
今回はオンラインでも何人か参加頂き、コミュニケーションを取れたがよかったと思います。
これまではオンラインでの参加者が少なかったので、ustreamとlingrをやっていて良かったと思いました。
懇親会ではシリコンバレーバレーかぶれの人達から、色々話しを聞いたりと楽しかったです。
懇親会の会場になった白木屋には、安い居酒屋というイメージしかを持ってなかったのですが、 意外と普通の居酒屋でした。リーズナブルなので、蛍池ではいいかもです。
そろそろ大阪以外での開催も考えているので、今後ともKanasan.JSを宜しくお願い致します。
Posted at 37to : commetns(1) : trackbacks(0)
Heya are using Wordpress for your site platform?
I'm new to the blog world but I'm trying to get started and create my own. Do you require any html coding
expertise to make your own blog? Any help would be greatly appreciated!
本エントリへのトラックバックURL
http://blog.37to.net/mt/mt-tb.cgi/115
Blog.37to.net
livedoor Readerの新着フィード - k_37to
del.icio.us - 37to's Bookmark Feeds
