今日のお題も、プロなら確実に知っておきたいネタです。
以前、JavaScript を書くときに欠かせないツールとして、prototype.js を紹介しました。
こちらです。
意外と知られていない JavaScript のコツ ～ Event.observe の活用
イベントリスナーの設定は Event.observe で出来ますが、ハンドラ内でどのようにイベントターゲット要素を受け取るのか、書いてませんでした。
今日はそれを書きたいと思います。
こちらも是非、知らなかった人は今日覚えて行ってください。
今日のお題は、
「prototype.js でのイベント発生要素の取得方法。
Event.element を使おう」
です。
イベントの取得も、IE と Firefox でコードパスが分かれてしまうので有名なところです。
prototype.js を使えば、こうした問題のある箇所におけるブラウザの違いをうまく吸収してくれるので、とても助かります。
prototype.js では Event.element を使うことで、イベントが発生した要素を簡単に取得できます。
例をみてください。
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
Event.observe(window,'load',window_onload);
function window_onload(evt){
$('p1').observe('click', p1_onclick);
}
function p1_onclick(evt){
var e = Event.element(evt);
alert( e.attributes['door'].value );
}
</script>
</head>
<body>
<p id="p1" door='4'>トヨタ シエナ</p>
</body>
</html>
上記、p1_onclick 内では、Event.elemnt を使って、クリックイベントが発生した要素 #p1 を取得しています。
ただこれだけです。
このように非常に簡単で、複数のブラウザでのイベントの問題が吸収できるので、ぜひ活用しましょう。
それではまた！