IT戦記

onclick 属性問題について

JavaScript

本気でやるならonclick属性は避けてライブラリを活用すべき - id:HolyGrailとid:HoryGrailの区別がつかない日記 に関して

この先、 HTML に onclick と書いても石を投げられないように書いておく＞＜

僕も onclick 属性がダメだと思っていた時代もありました。でも、今は時々使うなあ。

（あ、でも、 HTML と JS で分業している場合は、使わないほうがいいよね＾＾；そこだけは言っておく。）

JavaScript 入門の記事を書くときに onclick 属性がダメだとしたら、いろいろ本質的でないことを説明しなきゃいけない。

現状では onclick 属性が、もっとも簡単に HTML にイベントをマッピングできる方法だから、そんなに目くじらたてなくてもいいんじゃないかなあ？

たとえば

以下は、クリック時に href に GET を送るための onclick 属性。

<a id="hoge" href="/hoge" onclick="

var req = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('MSXML2.XMLHTTP');
req.open('GET', href);
req.send(null);
return false;

">click</a>

これを onclick 属性なしで「神経質に」やると以下のようになる

<script type="text/javascript">
// イベントハンドラを追加
function attach(elm, eventType, handler) {
    if (elm.addEventListener) {
        elm.addEventListener(eventType, handler, false);
    }
    else {
        elm.attachEvent('on' + eventType, handler);
    }
}

// イベントハンドラを削除
function detach(elm, eventType, handler) {
    if (elm.removeEventListener) {
        elm.removeEventListener(eventType, handler, false);
    }
    else {
        elm.detachEvent('on' + eventType, handler);
    }
}

var elm = document.getElementById('hoge');

var handler = function(event) {

    /* 本質的な部分はこの三行だけ */
    var req = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP");
    req.open('GET', elm.href);
    req.send(null);

    event = event || window.event;

    // イベントによる default 動作（ページ遷移など）を無効化する
    if (event.preventDefault) {
        event.preventDefault();
    }
    else {
        event.returnValue = false;
    }

    // 必要であれば、イベント浮上も止める
    if (event.stopPropagation) {
        event.stopPropagation();
    }
    else {
        event.cancelBubble = true
    }
};

// イベントを割り当てる
attach(elm, 'click', handler);

// 古いブラウザだと unload 時に detach しないとメモリリークする
attach(elm, 'unload', function() {
  detach(elm, 'click', handler);
  detach(elm, 'unload', arguments.callee);
});
</script>
（略）
<a id="hoge" href="/hoge">click</a>

もちろん、これはおおげさな例だけど、 onclick 属性を使わないことによって本質的ではないことをたくさん書かないといけない

という訳で

JavaScript の入門記事なら onclick 属性はありだと思う。

余談 1：イベント割当て以外で、ブラウザの非互換ってあんまりない

実は、基本的な DOM に関して言えば、イベントの割当て以外の非互換ってあまりないと思う。

言い方を変えると、 IE の JS で特に実装がムチャクチャなのはイベント周りってこと。

だから、 onclick 属性さえ使えれば、結構スムーズに入門記事が書けるんじゃないかあ。

余談 2：ライブラリに関して

ライブラリは流行り廃りが激しいから、特定のライブラリに依存した「おまじない」ばかり覚えているのはどうかと思うなあ

やっぱり、 DOM を直接書けたほうが、知識としては幅広く使えると思いますよ。

ツイートする

Permalink | コメント(5) | トラックバック(1) | 11:37