古籏一浩のJavaScriptラボ ― 第15回

どこよりも早い「Yahoo! UI Library 3」(YUI 3)入門

2009年10月15日 12時46分更新

文● 古籏一浩

マウスイベントの処理を設定する

　今度は、画像の上にマウスカーソルが重なったら画像を切り替える、シンプルなマウスオーバーのサンプルを作成します。マウスイベントの設定もサンプル01／02と同様にon()を使います。マウスが重なった時に発生するイベントはmouseoverですので、on()の最初の引数に'mouseover'を指定します。

　on()の2番目の引数はイベントが発生した時に呼び出される関数です。関数にはイベントオブジェクトが渡されます。ただし、このイベントオブジェクトはブラウザーネイティブ（純正）のものではなくYUI 3によってラップされたものです。

　マウスが重なったときに画像を切り替えるには、ターゲット（切り替えの対象）となる画像を求めなければいけません。イベントが発生したエレメントの情報は、イベントオブジェクトのtargetオブジェクトに入っています。YUI 3にはターゲットに対して属性を設定するset()メソッドが用意されていますので、これを使いましょう。

　set()の最初の引数には属性名、2番目の引数に設定値を指定します。画像を変更するので、src属性に変更後のURLを設定すればよいわけです。具体的には、以下のように記述すると、イベントが発生したエレメント＝画像がimagesフォルダ内にあるover.jpgに変わります。


e.target.set('src', 'images/over.jpg');

　これでできあがり――と言いたいところですが、肝心なものが抜けています。どのエレメント（imgタグ）にイベントを設定するのか、まだ指定していないのです。イベントの対象は、YUI 2.xまでは先にエレメントを取得してから設定する必要がありました（この方法は後述します）が、YUI 3ではon()の3番目の引数にCSSのセレクターを書くだけで設定できます。たとえば、imgタグのID名が「myButton」なら、以下のように書けばマウスオーバーイベントが設定されます。


Y.on('mouseover', function(e){
    e.target.set('src', 'images/over.jpg');
}, '#myButton');

　ここまでをまとめたのが、サンプル03です。同様の記述で、マウスがターゲットから外れたら画像を元に戻すようにmouseoutイベントを追加したのが、サンプル04です。


サンプル03の実行結果。マウスを乗せる前の状態		マウスを乗せた後の状態。画像が入れ替わる。サンプル04であれば、マウスが離れたら元の画像に戻る

●サンプル03


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="build/yui/yui.js"></script>
<script type="text/javascript"><!--
YUI().use('event', 'node', function(Y){
    Y.on('domready', function(){
        Y.on('mouseover', function(e){
            e.target.set('src', 'images/over.jpg');
        }, '#myButton');
    });
});
// --></script>
</head>
<body>
<h1>YUI v3 イベントサンプル</h1>
<div>
<img id="myButton" src="images/normal.jpg" width="128" height="32" alt="YUI 3">
</div>
</body>
</html>

●サンプル04


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="build/yui/yui.js"></script>
<script type="text/javascript"><!--
YUI().use('event', 'node', function(Y){
    Y.on('domready', function(){
        Y.on('mouseover', function(e){
            e.target.set('src', 'images/over.jpg');
        }, '#myButton');
        Y.on('mouseout', function(e){
            e.target.set('src', 'images/normal.jpg');
        }, '#myButton');
    });
});
// --></script>
</head>
<body>
<h1>YUI v3 イベントサンプル</h1>
<div>
<img id="myButton" src="images/normal.jpg" width="128" height="32" alt="YUI 3">
</div>
</body>
</html>