はじめてのYUI3 > イベント処理

YUI3でイベント処理をするコードを書いてみた。
イベント処理とは、マウス操作(クリック、ダブルクリック、マウスオーバなど)
があったときに、それが起こったタイミングで何かを実行するコードを書くこと。

デモはこちら

コードはこちら。
YUI().use("console", "console-filters", "dump", "node-base", function (Y) {
    new Y.Console({boundingBox: '#mylogconsole',style:"block"}).render();

    function handle(e, name){
        Y.log("event_type="+ e.type+ ", node="+ name, "info");
    }

    function search(e){
        var q = Y.one("#query");
        Y.log("query="+ q.get('value'), "info");
    }

    Y.on('click',    handle, '#foo', {}, "foo");
    Y.on('dblclick', handle, '#foo', {}, "foo");
    Y.on('click',    handle, '#bar', {}, "bar");
    Y.on('dblclick', handle, '#bar', {}, "bar");
    Y.on('click',    search, '#search');
});
参考にしたページはこちら

基本的に、
Y.on(イベント名, コールバック関数, イベント監視対象)
でイベントを登録できる。

なかなか簡潔で直感的な文法でいけてる。

人気の投稿